jquery - 使用 fotorama 中的多个图像运行 jQuery 函数 onclick

Question

我正在为图片库使用 fotorama 脚本。我花了一点时间来弄清楚修改脚本的正确语法，以便旋转图像可以点击。（请参阅下面代码中的 JS） 我想要做的是让每个旋转图像点击到不同的 URL。例如，在下面的代码中，图片“/03.jpg”可以链接到“google.com”，链接“/04.jpg”可以链接到“yahoo.com”，图片“/05.jpg”可以链接到“bing.com”。

<div id="fotorama">
    <a href="http://fotoramajs.com/;-)/03.jpg">
        <img src="http://fotoramajs.com/;-)/th/03.jpg" alt="Masha">
    </a>
    <a href="http://fotoramajs.com/;-)/04.jpg">
        <img src="http://fotoramajs.com/;-)/th/04.jpg" alt="Sasha">
    </a>
    <a href="http://fotoramajs.com/;-)/05.jpg">
        <img src="http://fotoramajs.com/;-)/th/05.jpg" alt="Klava">
    </a>
    <a href="http://fotoramajs.com/;-)/06.jpg">
        <img src="http://fotoramajs.com/;-)/th/06.jpg" alt="Dunya">
    </a>
    <a href="http://fotoramajs.com/;-)/07.jpg">
        <img src="http://fotoramajs.com/;-)/th/07.jpg" alt="Svetlana Nikolaevna">
    </a>
    <a href="http://fotoramajs.com/;-)/08.jpg">
        <img src="http://fotoramajs.com/;-)/th/08.jpg" alt="Zhenechka">
    </a>
    <a href="http://fotoramajs.com/;-)/01.jpg">
        <img src="http://fotoramajs.com/;-)/th/01.jpg" alt="Potapova Yulya">
    </a>
    <a href="http://fotoramajs.com/;-)/09.jpg">
        <img src="http://fotoramajs.com/;-)/th/09.jpg" alt="Asel">
    </a>
    <a href="http://fotoramajs.com/;-)/10.jpg">
        <img src="http://fotoramajs.com/;-)/th/10.jpg" alt="Ekaterina">
    </a>
    <a href="http://fotoramajs.com/;-)/11.jpg">
        <img src="http://fotoramajs.com/;-)/th/11.jpg" alt="Varya">
    </a>
    <a href="http://fotoramajs.com/;-)/12.jpg">
        <img src="http://fotoramajs.com/;-)/th/12.jpg" alt="Marina Petrova">
    </a>
    <a href="http://fotoramajs.com/;-)/13.jpg">
        <img src="http://fotoramajs.com/;-)/th/13.jpg" alt="Frosya">
    </a>
    <a href="http://fotoramajs.com/;-)/14.jpg">
        <img src="http://fotoramajs.com/;-)/th/14.jpg" alt="Sonechka">
    </a>
    <a href="http://fotoramajs.com/;-)/15.jpg">
        <img src="http://fotoramajs.com/;-)/th/15.jpg" alt="Galina">
    </a>
    <a href="http://fotoramajs.com/;-)/16.jpg">
        <img src="http://fotoramajs.com/;-)/th/16.jpg" alt="Tatiana">
    </a>
    <a href="http://fotoramajs.com/;-)/17.jpg">
        <img src="http://fotoramajs.com/;-)/th/17.jpg" alt="Artemida">
    </a>
    <a href="http://fotoramajs.com/;-)/18.jpg">
        <img src="http://fotoramajs.com/;-)/th/18.jpg" alt="Sofia">
    </a>
    <a href="http://fotoramajs.com/;-)/19.jpg">
        <img src="http://fotoramajs.com/;-)/th/19.jpg" alt="Nina">
    </a>
    <a href="http://fotoramajs.com/;-)/20.jpg">
        <img src="http://fotoramajs.com/;-)/th/20.jpg" alt="Valentina">
    </a>
    <a href="http://fotoramajs.com/;-)/21.jpg">
        <img src="http://fotoramajs.com/;-)/th/21.jpg" alt="Kristina">
    </a>
    <a href="http://fotoramajs.com/;-)/02.jpg">
        <img src="http://fotoramajs.com/;-)/th/02.jpg" alt="Browny">
    </a>
    <a href="http://fotoramajs.com/;-)/22.jpg">
        <img src="http://fotoramajs.com/;-)/th/22.jpg" alt="Gulchitai">
    </a>
    <a href="http://fotoramajs.com/;-)/23.jpg">
        <img src="http://fotoramajs.com/;-)/th/23.jpg" alt="Elena">
    </a>
    <a href="http://fotoramajs.com/;-)/24.jpg">
        <img src="http://fotoramajs.com/;-)/th/24.jpg" alt="Olga">
    </a>
    <a href="http://fotoramajs.com/;-)/25.jpg">
        <img src="http://fotoramajs.com/;-)/th/25.jpg" alt="Tonya">
    </a>
    <a href="http://fotoramajs.com/;-)/26.jpg">
        <img src="http://fotoramajs.com/;-)/th/26.jpg" alt="Feodora">
    </a>
</div>






// Change ↓values↓, press ↑Run↑, see →Result→
$('#fotorama').fotorama({
    width: '100%',
    height: 'auto',
    aspectRatio: 1.4989293362, // =700/467

    minWidth: null,
    maxWidth: null,
    minHeight: null,
    maxHeight: null,

    transition: 'slide', // or 'fade'
    click: true,
    loop: false, // or true

    autoplay: false,
    stopAutoplayOnAction: true,

    transitionDuration: 333,

    background: null,
    // 'black', '#b10000', or url(bg.png)
    margin: 4,
    minPadding: 8,
    alwaysPadding: false,
    zoomToFit: true,
    cropToFit: false,
    cropToFitIfFullscreen: false,

    flexible: false,
    fitToWindowHeight: false,
    fitToWindowHeightMargin: 20,

    fullscreen: false,
    fullscreenIcon: false,

    vertical: false,

    arrows: true,
    arrowsColor: null,
    arrowPrev: null,
    arrowNext: null,

    spinnerColor: '#808080',

    nav: 'thumbs', // or 'dots', or 'none'
    navPosition: 'auto',
    // 'top' | 'right' | 'bottom' || 'left'   
    navBackground: null,
    dotColor: null,
    thumbSize: null, // 36 or 51, whatever :-)
    thumbMargin: 4,
    thumbBorderWidth: 2,
    thumbBorderColor: null,
    // 'white', '#ff9', or even '#00ff84 #00eb89 #00b66f'
    thumbsCentered: true,
    hideNavIfFullscreen: false,

    caption: 'overlay', // 'simple', or 'none'

    preload: 3,
    preloader: 'dark', // or 'white'

    shadows: true,

    data: null,
    // e.g. [{img: 'http://fotoramajs.com/;-)/03.jpg'}, {img: 'broken.jpg'}, {img: 'http://fotoramajs.com/;-)/13.jpg'}]

    html: null,

    hash: false,
    startImg: 0,

    cssTransitions: true,

    onShowImg: null,
    // function(data){alert('Photo #'+(data.index+1)+' is coming!')}
    onClick: function(data){
        window.location = '/YourPage.html'
    },
    onFullscreenOpen: null,
    onFullscreenClose: null,
    onTransitionStop: null
});

有人可以帮忙吗？提前致谢。

Answer 1

看看第一个data-href

<img src="http://fotoramajs.com/;-)/th/03.jpg" data-href="http://example.com" alt="Masha">

并将脚本添加到您的页面

$(document).on("click","img",function(){

var url = $(this).data("href");
if(url != undefined && url != null)
{
   $(location).attr("href",url);
}

});

Answer 2

好的，在等待更好的解决方案时：（我已经用第一个例子进行了测试）

HTML：

<h1>Fotorama example</h1>

<div class="fotorama" data-width="499" data-height="333" data-click="false">
    <a  href="i/01.jpg"><img src="i/thumbs/01.jpg"  ></a>
    <a  href="i/02.jpg"><img src="i/thumbs/02.jpg"  ></a>
    <a  href="i/03.jpg"><img src="i/thumbs/03.jpg"  ></a>

</div>

注意 data-click=false -> 此选项可用，它将停止“通过单击在图像之间移动”。

而且，现在破解：

jQuery

$(window).load(function() {

links=new Array('http://www.google.com','http://www.yahoo.com','http://www.facebook.com' );


     jQuery.each($(".fotorama img"), function(i) {

$(this).attr('title',links[i]);


});

$(".fotorama img").click(function() {

    loc=$(this).attr('title');
    //alert(loc);

    window.location=loc;

});


});

这将起作用，但我也希望看到更好的解决方案。@Gökhan Girgin - 是的，非常奇怪，混淆的幻灯片脚本...... :)

Answer 3

我知道这是一个老问题，但我在 github 项目问题中找到了更好的解决方案。

取自 artpolikarpov：

这是您使用链接包装图像的方式：

<div class="fotorama">
    <div data-img="1.jpg"><a href="http://google.com/"></a>
    </div>
    <div data-img="2.jpg"><a href="http://yandex.ru/"></a>
    </div>
</div>

然后您必须在 CSS 中进行此修改以使其在 IE 中正常工作：

.fotorama__html div,
.fotorama__html a {
    display: block;
    height: 100%;
    /* Transparent links are not clickable in IE,
       but non-existent background fixes this.
      (Put an empty 1×1 image here to avoid
       errors in console.) */
    background: url(_.gif);
}

取自这里！