I am working on a web template which have an image gallery and jquery slider. a live sample of the web template can be found on this Link.
now when the user click on an image it will be shown inside a jQuery slider. here is part of the built-in touch.jquery.js script which will accomplish the jQuery slider rendering :-
// Show image in the slider
function showImage(index){
// If the index is outside the bonds of the array
if(index < 0 || index >= items.length){
return false;
}
// Call the load function with the href attribute of the item
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
}
// Load the image and execute a callback function.
// Returns a jQuery object
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);}
and here is the markup when an image is rendered inside the jquery slider:-
now i modified the above script as follow, to show a banner under the image when it is loaded inside the slider:-
// Preload an image by its index in the items array
function preload(index){
setTimeout(function(){
showImage(index);
}, 1000);
}
// Show image in the slider
function showImage(index){
// If the index is outside the bonds of the array
if(index < 0 || index >= items.length){
return false;
}
// Call the load function with the href attribute of the item
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
}
// Load the image and execute a callback function.
// Returns a jQuery object
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
//caption.find("img").remove();
var t = caption.find("img").attr('data-goto');
// caption.append($("<a />", { "text": "test", "href": t }));
if (!(t == null || t == "undefined")) {
caption.append("<br/>");
caption.append("<a href='" + t + "' style='font-size:16px;font-weight:bold'>Read More</a>");
}
caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
}, 500
);
}
the above will work well most of the time. but sometines if the internet is slow and i click on an image , then the slider will be displayed with a loading image and the banner text. and when the image is displayed the loading image will be removed along with the banner text... so i am not sure if i can modify my above customization to force the banner to show only when the image is fully loaded. as in this case the banner will not be removed when the loading image is removed.
finally here is the markup when the image gallery is shown inside the web page (not inside the jquery slider):-
<div class="list_carousel2 responsive">
<ul id="carousel2">
<li>
<figure><a href="img/page1_bigworks1.jpg" class="thumb"><img src="img/page1_works1.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
<li>
<figure><a href="img/page1_bigworks2.jpg" class="thumb"><img src="img/page1_works2.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
<li>
<figure><a href="img/page1_bigworks3.jpg" class="thumb"><img src="img/page1_works3.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
<li>
<figure><a href="img/page1_bigworks4.jpg" class="thumb"><img src="img/page1_works4.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
<li>
<figure><a href="img/page1_bigworks5.jpg" class="thumb"><img src="img/page1_works5.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
<li>
<figure><a href="img/page1_bigworks6.jpg" class="thumb"><img src="img/page1_works6.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
</li>
</ul>
</div>
