Run jQuery function onclick with mutiple images in fotorama

Question

I am using the fotorama script for an image gallery. It took me a little bit of time to figure out the correct syntax for modifying the script so that the rotating image was clickable. (see the JS in the code below) What I'm looking to do is have each rotating image click to a different URL. For example, in the code below, image "/03.jpg" could like to "google.com", link "/04.jpg" could link to "yahoo.com", and image "/05.jpg" could link to "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
});

Can someone help please? Thanks in advance.

Answer 1

Ok, while waiting for better solutions: (i have tested with first example)

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>

Notice data-click=false -> this option is available, and it will stop 'Moving between images by clicking.'

And, now hack:

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;

});


});

This will work, but i would like to see better solution too. @Gökhan Girgin - yes, very weird, obfuscated slideshow script... :)

Answer 2

Have a look at first data-href

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

and add the script to your page

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

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

});

Answer 3

I know is an old question but I found a better solution in the github project issues.

Taken from artpolikarpov:

This is how you wrap images with links:

<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>

And then you have to do this modification in CSS to make it work properly in 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);
}

Taken from here!