將onClick回調函數添加到fotorama腳本

我爲我的圖片庫使用fotorama腳本，但是從提供的設置示例中我無法理解如何鏈接圖片以在單擊時打開特定URL。將onClick回調函數添加到fotorama腳本

Fotorama設置頁面顯示與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 
});

我發現功能的onClick：空，但我不不知道使用什麼語法o f null ...

有人可以幫我嗎？

來源

2013-06-11 Cherubrock74

好吧我試圖使這項工作，但我不知道我是否應該爲現在設置爲空的小提琴HTML添加值。我將添加鏈接到圖像，然後再次測試...謝謝你的幫助Shikiryu – Cherubrock74

我解決了這個問題...我正在使用的函數是window.location ='http：//www.mydesiredurl .com「之間; – Cherubrock74

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

JSFiddle

來源

2013-06-11 15:15:49 Paulpro

將onClick回調函數添加到fotorama腳本

回答

相關問題