Automatisches jQuery Karussell triggert eine FancyBox

Question

Ich bin ein Webdesigner, der an einem Projekt arbeitet. Ich habe eine Idee, die jQuery erfordern würde. Da meine Erfahrung mit jQuery ziemlich einfach ist, dachte ich, ich würde hier fragen, was die beste Option für das ist, was ich brauche.

Ich habe einen Abschnitt auf der Homepage des Projekts. Ich hätte gerne eine "Wand" aus Bildern, die gleichmäßig verteilt sind. Wenn die Seite geladen würde, würde das erste Bild (oben links) ähnlich wie die Funktionalität von Fancybox oder Lightbox "nach vorne" "zoomen". Das Bild würde dann an die Wand zurückkehren und dann würde das nächste Bild in der Reihe "zoomen" und so weiter. Dies würde theoretisch für immer fortdauern, es sei denn, der Benutzer würde auf einem der Bilder schweben oder darauf klicken.

Ideen, wie dies getan werden kann?

Danke!

Ein Beispiel Bild der „Wand“ unten verbunden:

http://i25.tinypic.com/28vejk8.png

Answer 1

Nachdem so etwas wie dies mit jCarousel Lite und prettyPhoto Ich kann Ihnen sagen, dass ein Engpass ich traf (und tat es nicht umsetzen mussten finden Sie eine Lösung für das Umschreiben von Teil des PrettyPhoto-Plugins) war, dass, während das Karussell Bilder in und außer Sicht bewegt, prettyPhoto Elemente der generierten Galerie verlor. Als ich dann versuchte, die Galerie mit einem Aufruf von prettyPhoto() neu zu initialisieren, fügte ich mich an die bereits vorhandene Galerie an, so dass prettyPhoto die Bilder entweder wiederholte oder einfach falsch zählte.

Ich weiß, das ist keine Lösung, sondern nur etwas, das es wert ist, im Auge zu behalten. Was ich Ihnen sagen kann, ist, dass jCarousel Lite automatische Wiedergabe eingebaut hat und Ereignisse, die ausgelöst werden, wenn das aktuelle Bild geändert wird. Genauso wird jeder gute Leuchtkasten eine API haben, um manuell ein Fenster mit etwas Inhalt zu erzeugen. Wenn Sie das Änderungsereignis mit dem manuellen Aufruf eines Leuchtkastens kombinieren, bin ich mir sicher, dass Sie schnell das produzieren können, wonach Sie suchen.

Answer 2

http://jsajax.com/Articles/jquerycarouselprettyphoto/1438

Im Folgenden finden Sie, was Sie brauchen.

<script type="text/javascript"> 
$(function() { 
    $('#listimg').jcarousel(); 
    $('.gallery a[rel^="prettyPhoto"]').prettyPhoto({theme: 'dark_rounded'}); 
}); 
</script> 

...

<div id="container"> 
    <div id="grid"> 
    <div id="listimg" class="jcarousel-skin-tango"> 
     <ul class="picturelist gallery clearfix"> 

     <li class="thumb"> 
      <a href="http://www.youtube.com/watch?v=Sosele6QlWo" 
      title="# 今、風の中で - 平原綾香" rel="prettyPhoto[YouTube]"> 
      <img src="http://i4.ytimg.com/vi/Sosele6QlWo/default.jpg" alt="" /> 
      </a>  
     </li> 

...

 </ul>     
    </div> 
    </div> 
</div> 

Answer 3

<script> 
$(window).load(function() { 
    $(".galery_div").each(function() 
    { 
     $(this).jCarouselLite({ 
    auto: 10000, 
    speed: 1000, 
    visible: 4, 
    width:200, 
    height:140, 
    easing:'easeOutExpo', 
    }).removeClass('hidden_d'); 
    $('a.gallery').on().fancybox({ 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     //'transitionIn'  : 'none', 
     //'transitionOut'  : 'none', 
     'titlePosition'  : 'over', 
     'titleFormat'  : 
     function(title, currentArray, currentIndex, currentOpts) { 
     return '<span id="fancybox-title-over">Изображение ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';} 
    }); 
    }); 
    }); 
</script>