javascript - 路过 我正在使用这个用 html 和 javascrip

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

您可以尝试将与每个拇指关联的 url 包含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 );