Question

我使用javascript在我的网站上加载图片，具体取决于您点击的ul中的“小”照片... 我有类似的东西：

<script type="text/javascript">
   function viewImage(src, legende) {
      document.getElementById("imageBig").src = "images/photos/"+src;
      document.getElementById("legend").innerHTML = legende;
   }
 </script>

并简单地在html中：这样的事情：

<ul id="ulPhotos">
<li>
   <a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
      <img src="images/photos/carre-09.jpg" alt="" />
   </a>
   <a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')">
      <img src="images/photos/carre-03.jpg" alt="" />
   </a>
</li>
<li>
    <a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')">
        <img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" />
    </a>
    <a href="#centre" onclick="javascript:viewImage('01.jpg','')">
        <img src="images/photos/carre-01.jpg" alt="" />
    </a>
</li>
</ul>

所以你看，我可以，根据您点击的无序列表中的哪些小照片，加载一些特定的照片，将参数中的src字符串传递给我的viewImage函数......

但我决定使用Jquery来获得一些淡入效果。但我找不到一种方法来传递一个参数，告诉我的JQuery函数加载哪张照片取决于我点击的位置......

坚持到这里：

$(document).ready(function(){
    $('#ulPhotos').click(function() {
        var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
    }); 
});

我不希望11.jpg被硬编码，当我点击我的ul元素中的特殊li元素时，我需要通过参数传递它#ulPhotos ...

我希望我很清楚抱歉！

Answer 1

karim79提供了正确的解决方案，但实际上并未解释您的问题。

您将点击处理程序附加到列表本身而不是直接附加到图像。当附加的jQuery行为回调触发时，this是被单击的元素，您希望将其作为图像周围的链接。在您目前的情况下，this将成为列表本身。

您不一定需要在缩略图中添加类。 $('#ulPhotos a')会让您轻松上手。我同意在clickable上使用data-属性来了解您想要显示哪个大图片的建议。

此外，如果您要向a元素添加辅助点击行为，您可能希望阻止发生默认行为，例如：

$('#ulPhotos a').click(function (event) {
  $('#imageBig').attr('src', $(this).attr('data-big-image'));
  event.preventDefault();
});

Answer 2

一个非常直接的解决方案是为所有小图像分配一个公共（拇指或其他）类，并将较大图像的文件名存储在其rel属性中，例如：

<img src="something.jpg" rel="something_big.jpg" class="thumb"/>
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/>
<img id="bigImage" src="something_big.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', $(this).attr("rel"));
});

data是您可能考虑的另一种存储机制。

遵循特定约定并根据点击的较小图像的src“汇编”较大图像的文件名也很常见（也很简单），例如：

<img src="something.jpg" class="thumb"/>
<img src="somethingElse.jpg" class="thumb"/>
<img id="bigImage" src="big_something.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', 'big_' + $(this).attr("src"));
});

假设您所有的全尺寸图像都以'big_'为前缀，因此将“big_”附加到点击的缩略图的src就很简单了。

Answer 3

感谢你们两位，我的网站正在运作，我为像我这样可能有同样需求的初学者提供最终代码......

这是功能：

<script type="text/javascript">
     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];
    $('#imageBig').attr("src", "images/photos/"+bigPictureName).hide();
    $('#imageBig').fadeIn('fast');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

</script>

这里是html元素：

 <ul id="ulPhotos">
      <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

我使用alt属性附加图例，以便能够添加一些html标签，例如＆lt; em＆gt;因为当你将鼠标悬停在缩略图上时会出现标题，我不希望别人看到奇怪的标签......

有时，当你点击非常快时，它有点慢，它可以在第一次尝试时留在上一张照片上一段时间，也许是因为我没有使用CDN来放置jquery的缩小版本（我读过这样的建议），不知道，我是一个真正的初学者，但无论如何它都不是很严重......

顺便说一下，页面就在这里.. http://www.marion-baglan.net/photos.htm

JQuery根据你点击的位置设置img src

3 个答案: