好的，所以我正在尝试使用一个很酷的图像加载器/图库，我发现here名为ShineTime。
我想将其用作类似于my homepage上的产品查看器，您可以在其中查看我为其保留的空白区域。
现在，由于我需要将其作为产品查看器进行调整，我希望能够链接到我正在预览的产品或服务。
我在下面的代码中创建了一个条件，我将在这里强调：
$('#thumb1').click(function()
{
if($('#largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
else
{
}
});
正如您所看到的，我正在尝试将其设置为我点击thumb1元素的位置，这是一个包含我的第一个小缩略图的div，如果我然后点击largephoto div ，我的大预览照片所在的位置，然后它将带我到上面的链接。但是，出于某种原因，当我点击缩略图时，它将无法正常工作。当我点击缩略图时，它会直接转到链接。我想这可能是由于下面的一些jQuery代码，所以我在这里包含了完整的代码：
<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>
有什么想法吗？
答案 0 :(得分：3)
此代码：
$('#thumb1').click(function()
{
if($('#largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
});
...没有被用作jQuery。现在，这说：“当我点击'thumb1'时，通过调用'#largephoto'上的click()来检查是否返回了非null。那if语句将始终为非null（因此它是true），这就是为什么你被直接带到你的链接。你实际上是以编程方式点击你的大照片链接，而不是等待它被点击。
听起来您正在尝试捕获一系列点击事件。您可能需要执行诸如在thumb1单击事件中设置变量之类的操作，然后在bigphoto单击事件上进行检查。类似的东西：
var thumbClicked = false;
$('#thumb1').click(function()
{
thumbClicked = true;
});
$('#largephoto').click(function()
{
if (thumbClicked)
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
});
答案 1 :(得分：0)
首先尝试使用所有拇指上的类，然后说class =“thumbclass”。显然你需要调整它，但你可以看到我们解析产品编号的ID，然后网址可以是动态的。通过使用公共类，我们可以使click事件适用于所有拇指。可能需要调整。
var str ='',
productID='';
$('.thumbclass').click(function(){
str = this.attr("id");
productID = str.match(/[0-9]/);
})
$('#largephoto').click(function(){
if(productID != ''){
window.location.href= 'http://www.marioplanet.com/product.asp?IDnum='+productID
};
})