Question

嘿伙计们。我的目标是为自己创建一个新的业余爱好摄影网站。

目前一切都已到位。（可以看到here。）

问题是，尽我所能，我无法在CSS中取代图像。我试图移动图像等多年来，但它只是失败了。我的新计划是使用jQuery。

这是我需要你帮助的地方。我不了解jQuery，我需要在点击时用缩略图中的大图像替换它。有点像按钮。这可能吗，你能帮助我吗？非常感谢。

Answer 1

你可以试试这样的jQuery：

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    });
});

显然，您必须包含jQuery core，通常在您网页的<head>标记内：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

查看demo here

对于你的缩略图，可能是另一个不错的触摸，将光标变为指针（使缩略图看起来可点击） - 直接使用CSS，或让jQuery为你做：

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    }).each(function() {
        $(this).css('cursor', 'pointer');
    });
});

查看demo here

Answer 2

是的，你肯定需要使用Javascript / jQuery来做你想做的事。

在您的页面上包含<head>标记之间的jQuery脚本。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

然后这个简单的功能应该做你需要做的......

$(document).ready(function() {
$('.img img').hover(function() {
    $img = $(this)
    $('.content img').attr('src',$img.attr('src'))
});
});

你应该真正了解更多有关Javascript / jQuery的知识，这是一项非常酷的技术和良好的技能。

查看jQuery tutorials。

Answer 3

请不要使用JQuery。不要使用任何JavaScript。当你使用纯粹的CSS2时，你所效果的效果非常简单，这就像是矫枉过正。看看NOT SUITABLE FOR WORK网站：

http://www.simple-nude.com/nude-photos.html

并注意当您将鼠标悬停在任何拇指上时会发生什么。这样的东西似乎就是你想要的。我不认为该网站上的任何地方都有JavaScript。是的，我很狡猾，老式，但我总是喜欢最少的JS。

- 皮特

事实上，最低限度的JS是我的十字军东征。最糟糕的是用JS实现简单易用的链接！呸!

Answer 4

对于1.5.1没有任何冲突版本的人...我有一个类似的拇指开放到主图像中使用JQ 1.2.3在Dreamweaver中工作正常但是当加载到运行JQ 1.5.1的Joomla时它不会工作。代码如下。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".tmbimage a").click(function(){
    var largePath = jQuery(this).attr("href");
    var largeAlt = jQuery(this).attr("title");      
    jQuery("#mainimg").attr({ src: largePath, alt: largeAlt });     
}); 
});
</script>

单击缩略图时，用不同的图像替换大图像（图库）

4 个答案: