链接到SwipeView上的其他页面幻灯片

Question

我使用SwipeView（http://cubiq.org/swipeview）正确实施了触摸幻灯片，但我需要超越并允许每个图像幻灯片链接到另一个页面。

你有没有这样做过？

请告诉我如何做到这一点！我已经看到，在项目网站上，有人在几个月前提出了同样的问题，没有回答。这就是我来这里的原因。

这是代码如你所知：

<div id="wrapper"></div>  

<script type="text/javascript"> 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

var gallery, 
    el, 
    i, 
    page, 
    dots = document.querySelectorAll('#nav li'), 
    slides = [ 
     { 
      img: 'images/1.png', 
      width: 270, 
      height: 365 
      link: 'www.google.com, 
     }, 
     { 
      img: 'images/2.png', 
      width: 270, 
      height: 365, 
     }, 
     { 

    ]; 

gallery = new SwipeView('#wrapper', { numberOfPages: slides.length }); 



// Load initial data 
for (i=0; i<3; i++) { 
    page = i==0 ? slides.length-1 : i-1; 
    el = document.createElement('img'); 
    el.className = 'loading'; 
    el.src = slides[page].img; 
    el.width = slides[page].width; 
    el.height = slides[page].height; 
    el.onload = function() { this.className = ''; } 
    gallery.masterPages[i].appendChild(el); 

    el = document.createElement('span'); 
    el.innerHTML = slides[page].desc; 
    gallery.masterPages[i].appendChild(el) 
} 

gallery.onFlip(function() { 
    var el, 
     upcoming, 
     i; 

    for (i=0; i<3; i++) { 
     upcoming = gallery.masterPages[i].dataset.upcomingPageIndex; 

     if (upcoming != gallery.masterPages[i].dataset.pageIndex) { 
      el = gallery.masterPages[i].querySelector('img'); 
      el.className = 'loading'; 
      el.src = slides[upcoming].img; 
      el.width = slides[upcoming].width; 
      el.height = slides[upcoming].height; 

      el = gallery.masterPages[i].querySelector('span'); 
      el.innerHTML = slides[upcoming].desc; 
     } 
    } 

    document.querySelector('#nav .selected').className = ''; 
    dots[gallery.pageIndex+1].className = 'selected'; 
}); 

gallery.onMoveOut(function() { 
    gallery.masterPages[gallery.currentMasterPage].className = gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, ''); 
}); 

gallery.onMoveIn(function() { 
    var className = gallery.masterPages[gallery.currentMasterPage].className; 
    /(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active'); 
}); 

</script> 

非常感谢！

-Marcelo

Answer 1

下面的代码对我的作品在iPad上：

<script type="text/javascript"> 
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
    var gallery, 
    el, 
    lnk, 
    i, 
    page, 
    dots = document.querySelectorAll('#nav li'), 
    slides = [ 
    { 
     img: 'img/startseite/bild-1.jpg', 
     width: 1024, 
     height: 721, 
     desc: 'Description 1', 
     link: 'http://www.google.de' 
    }, 
    { 
     img: 'img/startseite/bild-2.jpg', 
     width: 1024, 
     height: 721, 
     desc: 'Description 2', 
     link: 'http://www.heise.de' 
    }, 
    { 
     img: 'img/startseite/bild-3.jpg', 
     width: 1024, 
     height: 721, 
     desc: 'Description 3', 
     link: '' 
    }, 
    { 
     img: 'img/startseite/bild-4.jpg', 
     width: 1024, 
     height: 721, 
     desc: 'Description 4', 
     link: '' 
    } 
    ]; 
    gallery = new SwipeView('#contentslide', { numberOfPages: slides.length }); 
    // Load initial data 
    for (i=0; i<3; i++) { 
    page = i==0 ? slides.length-1 : i-1; 
    // if link is set, create a-tag 
    if(slides[page].link != ''){ 
     lnk = document.createElement('a'); 
     lnk.href = slides[page].link; 
     lnk.title = slides[page].link; 
     gallery.masterPages[i].appendChild(lnk); 
    } 
    el = document.createElement('img'); 
    el.className = 'loading'; 
    el.src = slides[page].img; 
    el.width = slides[page].width; 
    el.height = slides[page].height; 
    el.onload = function() { this.className = ''; } 
    // if there's a link, append the img inside the a-tag 
    if(slides[page].link != ''){ 
     gallery.masterPages[i].firstChild.appendChild(el); 
    }else{ 
     gallery.masterPages[i].appendChild(el); 
    } 
    el = document.createElement('span'); 
    el.innerHTML = slides[page].desc; 
    // if there's a link, append the span inside the a-tag 
    if(slides[page].link != ''){ 
     gallery.masterPages[i].firstChild.appendChild(el); 
    }else{ 
     gallery.masterPages[i].appendChild(el); 
    } 
    } 
    ... 
</script>