1
0

Use jQuery to preload images. Added thumbnail into comments page.

This commit is contained in:
3nids 2009-09-25 09:55:41 +02:00
parent 072ced072a
commit 50c94764f2
7 changed files with 30 additions and 13 deletions

View File

@ -25,6 +25,12 @@
float: right; float: right;
} }
.gCommentThumb{
padding: 5px;
text-align: left;
}
/** ******************************************************************* /** *******************************************************************
* 1) Basic HTML elements * 1) Basic HTML elements
@ -546,6 +552,12 @@ form .gError,
.gCommentBox { .gCommentBox {
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
} }
.gCommentBox:hover{
background-color: black;
color: #ffffcc;
}
.gComment { .gComment {
margin-left: 2em; margin-left: 2em;
margin-top: .3em; margin-top: .3em;

View File

@ -14,7 +14,8 @@
<? for($i=0;$i<$children_count;$i++): ?> <? for($i=0;$i<$children_count;$i++): ?>
<? $child = $children_all[$i] ?> <? $child = $children_all[$i] ?>
<? if ($child->is_photo()): ?> <? if ($child->is_photo()): ?>
image_url[img_count] = "<?=$child->file_url()?>"; if(img_count>0){preload_image_object += ', ';}
preload_image_object += '"<?=$child->file_url()?>"';
img_count++; img_count++;
<? endif ?> <? endif ?>
<? endfor ?> <? endfor ?>

View File

@ -28,6 +28,7 @@
<?= $theme->head() ?> <?= $theme->head() ?>
</head> </head>
<body class="modcontent"> <body class="modcontent">
<div class="gCommentThumb"> <img src="<?=$thumb?>"></div>
<a href="<?= url::site("form/add/comments_3nids/{$item_id}") ?>" id="gAddCommentButton" <a href="<?= url::site("form/add/comments_3nids/{$item_id}") ?>" id="gAddCommentButton"
class="gButtonLink ui-corner-all ui-icon-left ui-state-default right"> class="gButtonLink ui-corner-all ui-icon-left ui-state-default right">
<span class="ui-icon ui-icon-comment"></span> <span class="ui-icon ui-icon-comment"></span>
@ -42,7 +43,7 @@
<ul> <ul>
<? foreach ($comments as $comment): ?> <? foreach ($comments as $comment): ?>
<li id="gComment-<?= $comment->id ?>" class="gCommentBox"> <li id="gComment-<?= $comment->id ?>" class="gCommentBox">
<?= t('%date, <b>%name</b>: ', <?= t('<b>%name</b> <small>%date</small>: ',
array("date" => date(module::get_var("gallery", "date_time_format", "Y-M-d H:i:s"), $comment->created), array("date" => date(module::get_var("gallery", "date_time_format", "Y-M-d H:i:s"), $comment->created),
"name" => html::clean($comment->author_name()))); ?> "name" => html::clean($comment->author_name()))); ?>
<div class="gComment"> <div class="gComment">

View File

@ -14,7 +14,8 @@
<? for($i=0;$i<$children_count;$i++): ?> <? for($i=0;$i<$children_count;$i++): ?>
<? $child = $children_all[$i] ?> <? $child = $children_all[$i] ?>
<? if ($child->is_photo()): ?> <? if ($child->is_photo()): ?>
image_url[img_count] = "<?=$child->file_url()?>"; if(img_count>0){preload_image_object += ', ';}
preload_image_object += '"<?=$child->file_url()?>"';
img_count++; img_count++;
<? endif ?> <? endif ?>
<? endfor ?> <? endfor ?>

View File

@ -14,3 +14,10 @@
<a href="<?= $item->parent()->url() ?>?show=<?= $item->id?>"><h4><span></span><?= $item->parent()->title ?></h4></a> <a href="<?= $item->parent()->url() ?>?show=<?= $item->id?>"><h4><span></span><?= $item->parent()->title ?></h4></a>
</div> </div>
</div> </div>
<script type="text/javascript">
if(img_count>0){preload_image_object += ', ';}
preload_image_object += '"<?=$item->file_url()?>"';
img_count++;
</script>

View File

@ -62,6 +62,7 @@
<?= $theme->script("jquery.localscroll.js") ?> <?= $theme->script("jquery.localscroll.js") ?>
<?= $theme->script("jquery.easing.js") ?> <?= $theme->script("jquery.easing.js") ?>
<?= $theme->script("jquery.fancybox.js") ?> <?= $theme->script("jquery.fancybox.js") ?>
<?= $theme->script("jquery.preloadimages.js") ?>
<?= $theme->script("ui.init.js") ?> <?= $theme->script("ui.init.js") ?>
<? /* These are page specific, but if we put them before $theme->head() they get combined */ ?> <? /* These are page specific, but if we put them before $theme->head() they get combined */ ?>
@ -76,11 +77,6 @@
</head> </head>
<body <?= $theme->body_attributes() ?>> <body <?= $theme->body_attributes() ?>>
<script type="text/javascript">
preload_image_object = new Image();
image_url = new Array();
var img_count = 0;
</script>
<?= $theme->page_top() ?> <?= $theme->page_top() ?>
<div id="doc4" class="yui-t5 gView"> <div id="doc4" class="yui-t5 gView">
<?= $theme->site_status() ?> <?= $theme->site_status() ?>
@ -174,9 +170,7 @@
<?= $theme->page_bottom() ?> <?= $theme->page_bottom() ?>
<script type="text/javascript"> <script type="text/javascript">
if (img_count > 0){ if (img_count > 0){
for(var i=0;i<=img_count;i++){ eval("$.preloadImages("+preload_image_object+");");
preload_image_object.src = image_url[i];
}
} }
</script> </script>
</body> </body>

View File

@ -10,11 +10,12 @@
<? for($i=0;$i<$children_count;$i++): ?> <? for($i=0;$i<$children_count;$i++): ?>
<? $child = $children_all[$i] ?> <? $child = $children_all[$i] ?>
<? if ($child->is_photo()): ?> <? if ($child->is_photo()): ?>
image_url[img_count] = "<?=$child->file_url()?>"; if(img_count>0){preload_image_object += ', ';}
preload_image_object += '"<?=$child->file_url()?>"';
img_count++; img_count++;
<? endif ?> <? endif ?>
<? endfor ?> <? endfor ?>
</SCRIPT> </script>
<div id="gSearchResults"> <div id="gSearchResults">