Запустить функцию jQuery onclick с несколькими изображениями в fotorama

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

Ok, в ожидании лучших решений: (я протестировал с первым примером)

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 2

Посмотрите на первый данных 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 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); 
} 

Взято из here!