2

画像ギャラリーに 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
});

誰か助けてくれませんか？前もって感謝します。

4

3 に答える 3

0

古い質問であることは知っていますが、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>

そして、IE で適切に動作させるには、CSS で次の変更を行う必要があります。

.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);
}

ここから撮影！

于 2015-06-18T22:11:50.070 に答える