OK, so I’m trying a to use a cool image loader/gallery I found here called ShineTime.
I want to adopt it to resemble a product viewer on my homepage where you can view the blank space I have reserved for it.
Now, since I need to adapt it to be a product viewer, I would like to have links to products or services I’m previewing.
I have created a conditional in the code you can see below which I’ll highlight here:
$('#thumb1').click(function()
{
if($('#largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
else
{
}
});
As you can see, I’m trying to set it up to where I click on the thumb1 element, a div containing my first small thumbnail, and if I then click on the largephoto div, where my larger preview photo resides, then it will take me to the above link. For some reason, though, when I click on the thumbnail, it won’t work correctly. It will take me directly to the link when I click on the thumbnail. I think it may be due to some of the jQuery code below, so I have included the full code here:
<html>
<head>
<title>ShineTime at AddyOsmani.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to ShineTime';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
$('#thumb1').click(function()
{
if($('largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
else
{
}
});
});
</script>
<div id="container">
<div id="containertitle">
Welcome to ShineTime
</div>
<div class="mainframe">
<div id="largephoto">
<div id="loader"></div>
<div id="largecaption">
<div class="captionShine"></div>
<div class="captionContent"></div>
</div>
<div id="largetrans">
</div>
</div>
</div>
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div id="thumb1" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage1.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage1.jpg" class="large_image" rel="Mario (Running) - Plush" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb2" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage2.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage2.jpg" class="large_image" rel="Mushroom - Plush" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb3" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage3.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb4" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage4.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage4.jpg" class="large_image" rel="I won't bite, I promise!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb5" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage5.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb6" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage6.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb7" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage7.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage7.jpg" class="large_image" rel="I can't be invisible, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb8" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage8.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage8.jpg" class="large_image" rel="Dave Lizewski is a man in a green costume. He is Kick-Ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb9" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage9.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage9.jpg" class="large_image" rel="I probably shouldn't have yelled 'surprise' wearing this costume.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb10" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage10.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage10.jpg" class="large_image" rel="I can't read your mind, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb11" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage11.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage11.jpg" class="large_image" rel="I love that indented text effect up there. Not bad.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb12" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage12.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage12.jpg" class="large_image" rel="I got your a present. It's an Ass-Kicking." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb13" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage13.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage13.jpg" class="large_image" rel="You don't have to be super to be a hero." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb14" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage15.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage15.jpg" class="large_image" rel="We Can Kick Ass - Anytime, Anyday." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb15" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage14.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage14.jpg" class="large_image" rel="You know..I had this look first. Batman copied ME." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
</div>
</div>
</html>
Any ideas?
This code:
…isn’t being used as jQuery intended. Right now, this says: “When I click on ‘thumb1’, check if something non-null is being returned by calling
click()on ‘#largephoto’. That if-statement will always be non-null (thus it istrue), so that’s why you’re being taken directly to your link. You’re actually programmatically clicking on your largephoto link, not waiting for it to be clicked on.It sounds like you’re trying to capture a series of click events. You might have to do something like set a variable in your thumb1 click event, and then check it on the largephoto click event. Something like: