“jQuery Resizable FullScreen Gallery Plugin” Documentation by “Sike”

---

“jQuery Resizable FullScreen Gallery Plugin”

---

Table of Contents

1. Usage
2. source and deploy Folder
3. Credits
4. Features

---

A) Usage - top

• Import the required Javascript and CSS

  <link rel="stylesheet" href="css/style.css" type="text/css" />
  
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.fullscreen.min.js" type="text/javascript"></script>
  

• HTML Structure

  <div id="gallery"> 
  	<div class="bigImages">
  		<ul>    
  		<li><img src="images/flickr_images/img2.jpg" alt="the thumbnail" /></li>
  		<li>
  		<a href="http://codecanyon.net/user/sike" target="_blank">
  		<img src="images/flickr_images/img3.jpg" alt="the thumbnail" />
  		</a>
  		</li>										
  		<li><img src="images/flickr_images/img4.jpg" alt="the thumbnail" /></li>	   
  		...
  		...
  	</ul>                  
  	</div>          		
  	<div class="thumbnails">   			
  		<ul>   
  			<li>
  			 <img src="images/thumbs/thumbnail.png" alt="the thumbnail" />
  			</li>
  			<li>
  			 <img src="images/thumbs/youtube.png" alt="the thumbnail" />
  			</li>
  			...
  			...
  		</ul>                                                               
  	</div>                		
  </div>                                   
  

  The big images are wrap in a div, which class is bigImages, the thumbnails are in class thumbnails.

• Basic Setup

  $(document).ready(function() { 		
       $('#gallery').fullscreenGallery();  
  });
  

• The whole available settings of the plugins:

  $(document).ready(function() { 
  	$('#gallery').productSlide({        
  		// the parent container of the slide, we customize the CSS with it
  		containerClass: 'galleryContainer',
  		// the thumbnails' container 
  		thumbContainer: 'thumbContainer',  
  		// the parent container of the thumbnails, 
  		// we put the arrow buttons there
  		thumbParentContainer: 'thumbParentContainer',
  		// display how many thumbnails
  		thumbNum: 6,                  
  		// padding between each thumbnails
  		thumbPadding: 0,                  
  		// auto hide the thumbnails when mouse out
  		thumbAutoHide: true,                      
  		// auto delay slideshow or not
  		slideShow: true,              
  		// the delay second of the slideshow
  		slideShowDelay: 4000
  	});  
  }); 		
  

• For example, you want to disable the slideshow, and always display the thumbnails, just:

  $(document).ready(function() { 
  	$('#gallery').productSlide({        
  		thumbAutoHide: false,                      
  		slideShow: false
  	});  
  }); 		
  

---

B) The source and deploy Folder - top

You only have to upload the files in the deploy folder. The deploy folder contains the minified javascript. You can just update the image content in the index.html by your own ones.

Please don't upload the files in the source folder. The source folder contains the original javascript source, so please don't upload the javascript files in this folder. Thanks.

---

C)Credits - top

jQuery, Backstretch are open source under MIT.

The pictures most are from Simon, which under Creative Commons Attribution-ShareAlike

---

D)Features: - top

• Auto delay slideshow, paused when user hover the image.
• It's lightweight.
• Mobile friendly.
• Resizeable, the fullscreen image is resizeable.

---

Sike

Go To Table of Contents

---