Adding onClick callback function to fotorama script

Question

I am using fotorama script for my images gallery, but from the setup examples provided I cannot understand how to link a picture to open a specific URL when clicked.

Fotorama setup page suggests to play with this fiddle

HTML:

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

JS:

// 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: null,
    onFullscreenOpen: null,
    onFullscreenClose: null,
    onTransitionStop: null
});

I found the function onClick: null, but I don't know what syntax to use in place of null...

can someone help me please?

Answer 1

onClick: function(data){
    // Code that you want to execute onClick
},

JSFiddle