Question

我正在使用这个用html和javascript制作的幻灯片： http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

幻灯片显示效果很好，大图像无法点击。它有属性，但如何使它们工作，所以当我点击图片发送给我的具体链接（我在href =“”中写的链接）

它从中获取值：

<div class="es-carousel">
  <ul>
    <li><a href="http://www.google.com">
      <img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
           data-description="From off a hill whose concave womb reworded" />
    </a></li>

并在此gallery.js中生成：

var $thumb    = $item.find('img'),
    largesrc  = $thumb.data('large'),
    title     = $thumb.data('description');

$('<img/>').load( function() {

    $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

    if( title )
        $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

Answer 1

您可以尝试将与每个拇指关联的网址包含在元素上作为data-attribute：

 <div class="es-carousel">
  <ul>
    <li><a href="#">
      <img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
           data-description="From off a hill whose concave womb reworded"
           data-url="http://google.co.uk"/>
    </a></li>

并更新gallery.js代码，以便在使用img标记点击拇指时包装为大图片创建的a元素：

var $thumb    = $item.find('img'),
    largesrc  = $thumb.data('large'),
    title     = $thumb.data('description');
    url       = $thumb.data('url');

$('<img/>').load( function() {

    $rgGallery.find('div.rg-image').empty().append('<a href="' + url + '"><img src="' + largesrc + '"/></a>');

    if( title )
        $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

通过

1 个答案: