CODEWITHSUNDEEP
javascriptjqueryimagejcarousel
WebmasterWill
WebmasterWill

Reputation:

Automatic jQuery Carousel triggering a FancyBox

I'm a web designer working on a project. I have an idea that would require jQuery. Since my experience with jQuery is fairly basic, I thought I would ask here what might be the best option for what I need.

I have a section on the home page of the project. I would like to have a "wall" of images that would be equally spaced. When the page would load, the first image (in the top left) would "zoom" forward sort of like the functionality of Fancybox or Lightbox. The image would then return to the wall and then the next image in the row would "zoom" and so on. This would continue theoretically forever, unless the user hovered or clicked on one of the images.

Ideas on how this can be done?

Thanks!

An example image of the "wall" is linked below:

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

Upvotes: 1

Views: 4671

Answers (3)

ruservic
ruservic

Reputation: 11

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

Upvotes: 1

Andy
Andy

Reputation: 11

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

Below is what you need.

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

Upvotes: 1

Nathan Taylor
Nathan Taylor

Reputation: 24606

Having had to implement something like this with jCarousel Lite and prettyPhoto I can tell you that one bottleneck I hit (and didn't find a solution for short of rewriting part of the prettyPhoto plugin) was that as the carousel moves images in and out of view prettyPhoto was losing elements of the generated gallery. Furthermore, when I attempted to reinitialize the gallery with a call to prettyPhoto() I ended up appending to the already existing gallery such that prettyPhoto was either repeating or simply miscounting the images.

I realize this isn't a solution, but just something worth keeping in mind as you progress. What I can tell you is that jCarousel Lite has auto play built in and events that fire when the current image is changed. Likewise, any good lightbox will have an API to manually spawn a window with some content. If you combine the change event with manual invocation of a lightbox I am sure you can quickly produce what you're looking for.

Upvotes: 0

Related Questions