“jQuery Grid and List Switch” Documentation by “Sike”

---

“jQuery Grid and List Switch”

---

Table of Contents

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

---

A) Usage - top

• First import the CSS

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/jquery.viewswitch.css">
  

  and the required Javascript.

  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/modernizr.custom.49511.js" type="text/javascript"></script>
  <script src="js/jquery.viewswitch.min.js" type="text/javascript"></script>
  

• HTML Structure, looks like:

  div.button-contaienr + ( div.grid-container > div.thumb-container > (.short-desc + .long-desc))

  <div class="button-container">
  	<p class="grid"><a href="#" id="grid-btn" class="active">Grid</a></p>
  	<p class="list"><a href="#" id="list-btn">List</a></p>
  </div>
  <div class="grid-container">
  	<div class="thumb-container">
  		<img src="imgs/thumbs/thumbnail1.png" alt="" class="grid-img">
  		<p class="short-desc">
  			...
  		</p>
  		<p class="long-desc">
  		 	...
  		</p>
  	</div>
  	<div class="thumb-container">
  		...
  	</div>
  	...
  </div>
  
  

• Basic plugin setup, just initilise it with the parent container of the content:

  $('.wrapper').viewSwitch();
  

• Want to customize the hover pulse effect?
  Now the pulse is in CSS3, you can customize it in the jquery.viewswitch.css, just search the pulse and replace it with other effect as you like.
• The whole available plugin options:
  

  $('.wrapper').viewSwitch({
  	// pulse effect when user mouse over or not
  	hoverEffect : true,
  	// the container of the thumbnail
  	thumbContainer: '.thumb-container'
  });
  

---

B) The source Folder - top

You only have to upload the minified files in the js folder. For example just upload the jquery.viewswitch.min.js. You can update the content in the index.html by your own ones.

Please don't upload the un-minify js files in the js folder under source folder. For example please don't upload the jquery.viewswitch.js. Thanks.

---

C)Credits - top

jQuery http://jquery.com
Lightbox http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

---

D)Features: - top

• CSS3 transition in the modern browser.
• Fade only on the older browser, like IE8.
• Smooth grid and list switch.
• Optional hover effect.
• Clean and lightweight, free update in the future.

---

Sike

Go To Table of Contents

---