Question

我想创建一个带有缩略图和主画框的画廊，我设法做到了。现在我想将每张图片链接到不同的.html。在下面显示的情况下，所有图片在点击时加载c8.html，我只希望c8.jpg链接到c8.html，c7.jpg到c7.html等。从我的理解发生问题因为“main-img”取代例如c8.jpg与c7.jpg，代码切换到<a href="c8.html"><img src="images/gallery/c7.jpg" id="main-img"/></a>。

感谢您的时间和帮助！

安德拉兹

<script>
    jQuery(document).ready(function($) {
        $("#gallery li img").click(function(){
            $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
        });
    });
</script>

<div id="gallery">
  <a href="c8.html"><img src="images/gallery/c8.jpg" id="main-img"/></a>
<ul>
  <li><img src="images/gallery/thumb/c1.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c2.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c3.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c4.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c5.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c6.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c7.jpg" alt=""/></li>
  <li><img src="images/gallery/thumb/c8.jpg" alt=""/></li>
</ul>

Answer 1

您只需在点击功能

中执行以下操作

$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
$('#main-img').parent().attr('href',$(this).attr('src').match(/c\d/)[0]+".html");

/c\d/正则表达式最多只匹配9，如果你有更多，你必须稍微改变一下。

图库主框架中的每张图片都必须拥有自己的链接

1 个答案: