Highslide Gallery Load images after clicking thumbnails (improve pagespeed) - php

Question

I use Highslide jQuery Gallery to load albums and their thumbnails on a single page.
Users can click the thumbnail and each album then loads.
The website runs slow if I have more than 10 albums per page (due to loading thumbs and pics)
I use base64 encoding on the data in the database.
How can I load only the thumbails instead of whole albums?
The album will only load once the user has clicked the thumbnail..
<?php
//vars
$albumsQuery = mysql_query("select * from albums");
$album_count = 0;
// start loop
while ($album = mysql_fetch_array($albumsQuery)) {
$album_count++;
$unserializePhotos = unserialize(base64_decode($album['photos']));
$unserializeDescriptions = unserialize(base64_decode($album['descriptions']));
$firstPhoto = '';
$first_photo_count = 0;
foreach ($unserializePhotos as $k => $v) {
if ($first_photo_count == 0) {
$firstPhoto = $v['name'];
}
$first_photo_count++;
}
$first_desc_count = 0;
foreach ($unserializeDescriptions as $k => $v) {
$unserializeDescriptions[$k]=htmlspecialchars($v);
if ($first_desc_count == 0) {
$firstDesc = htmlspecialchars($v);
}
$first_desc_count++;
}
?>
<div class="highslide-gallery">
<a class='highslide' id="thumb<?php echo $album_count; ?>" href='/albums/<?php echo $firstPhoto; ?>' onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
<img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />
</a>
<div class="hidden-container">
<?php
$photoDescIndex = 0;
foreach ($unserializePhotos as $k => $v) {
if ($v['name'] != '' && $v['name'] != $firstPhoto){
?>
<a class='highslide' href='/albums/<?php echo $v['name']; ?>' onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
<img src='/albums/<?php echo $v['name']; ?>' />
</a>
<?php
}
$photoDescIndex++;
}
?>
</div>

Answer 1

You are loading full image into thumbnail: <img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />. Browser requires more time to load big photo and even more time to resize it. You should prepare small 100x100 thumbnails on the server side.
You should not load all albums <div class="hidden-container">...</div> explicitly. Load content of selected album via AJAX on demand (when user clicked on thumbnail). Additionally you may start to pre-load albums in background after page loading.
Do not assign event handlers directly to each onclick="..." - use event delegation e.g.
$("body").on("click", ".highslide", function() {
var album_count = this.id.slice(5); // a id="thumb<?php echo $album_count; ?>"
var target = $(this).next("div.hidden-container");
// TODO: load album album_count into target via AJAX
// TODO: after load: hs.expand(this, {slideshowGroup: album_count});
});