i am stuck with the following problem. I am dealing with an html/php/js situation where i have some image thumbnails with a specific link class, so when they get clicked, a javascript function takes the image src and loads the image in a specific place.
Is there a way that i could know each time what image is currently shown since the javascript function dows not load the page again, it just replaces the image, like AJAX
.
If i knew in PHP what image was currently shown, i could make some links to prev($array)
and next($array)
.
Code follows:
<ul id="<?php echo $gal_id; ?>" class="<?php echo $extraWrapperClass; ?>" style="list-style-type: none;" >
<?php foreach($gallery as $count=>$photo): ?>
<li class="Thumb">
<span class="LinkOuterWrapper">
<span class="LinkWrapper">
<a href="<?php echo $photo->sourceImageFilePath; ?>" class="GalleriaLink Link<?php if($count==0) echo ' LinkSelected'; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank">
<?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
<img class="Img" src="<?php echo $transparent; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;background-image:url(<?php echo $photo->thumbImageFilePath; ?>);" />
<?php endif; ?>
</a>
</span>
</span>
</li>
<?php endforeach; ?>
</ul>
and the js code:
$('.GalleriaLink').click(function(event){
event.preventDefault();
// Prevent clicks upon animation
if($(':animated').length) return false;
// Assign element
var el = $(this);
// Parent container
var outerContainer = el.parent().parent().parent().parent().parent();
var placeholderContainer = outerContainer.find(".PlaceholderContainer div:first");
// Placeholder elements
var targetLink = placeholderContainer.find("a:first");
var targetTitle = placeholderContainer.find("p:first");
var targetImg = targetLink.find("img:first");
// Source elements
var sourceLinkHref = el.attr("href");
var sourceLinkTitle = el.attr("title");
var sourceImage = el.find("img:first");
if(targetLink.attr("href")!==sourceLinkHref && targetLink.hasClass('TargetLink')){
if(el.find("span:nth-child(2)")){
var sourceTitle = el.find(".Caption").html();
} else {
var sourceTitle = false;
}
placeholderContainer.animate({'opacity':0},300,function(){
targetImg.attr("src",sourceLinkHref);
var counter = 0;
targetImg.load(function(){
if (counter++ == 0) {
targetImg.attr("title",sourceImage.attr("title"));
targetImg.attr("alt",sourceImage.attr("alt"));
targetLink.attr("href",sourceLinkHref);
targetLink.attr("title",sourceLinkTitle);
if(targetTitle.hasClass('TargetTitle') && sourceTitle) targetTitle.html(sourceTitle);
placeholderContainer.animate({'opacity':1},600);
}
});
});