LS3-SOLUTIONS.COM

Galleria Mouseover Mod

My Galleria mod is a modified version of the infamous Galleria plugin (original plugin can be found here). Note to use this plugin you must also link to the jquery core.

Download this mod here. [jquery.galleria 15kb]

Sample of the more complex application:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>

<script type="text/javascript">
/* Galleria scripts */
 $(document).ready(function(){
  $('.gallery_demo_unstyled').addClass('gallery_demo');
    // adds new class name to maintain degradability
  $('.nav').css('display','none'); // hides the nav initially
  $('.gallery_demo_unstyled').css('display','none').fadeIn(600);

  $('ul.gallery_demo').galleria({
   history   : false,
    // deactivates the history object for bookmarking, back-button etc.
   clickNext : false,
    // helper for making the image clickable.
   insert    : undefined, // the containing selector for our main image.
		 // If not found or undefined, galleria will create a container
		  // before the ul with the class .galleria_container (see CSS)
   onImage   : function() { $('.nav').css('display','none'),
   //$('img.replaced').css('display','none').fadeIn(600);
   $('img.replaced').css('display','none').hide().fadeIn(1000);
			} // shows the nav when the image is showing
		});
	});
</script>

Now set up the images:

<ul class="gallery_demo_unstyled">
 <li class="active"><img src="1.jpg" alt="" /></li>

 <li><img src="2.jpg" alt="" /></li>
 <li><img src="3.jpg" alt="" /></li>
 <li><img src="4.jpg" alt="" /></li>
 <li><img src="5.jpg" alt="" /></li>
 <li><mg src="6.jpg" alt="" /></li>
</ul>