Barcelona jQuery Photo Gallery

A great way to display photos online is definitely by using a Photo Gallery.

jQuery and CCS can make your life easier and save you a lot of repetitive coding by using plugins.

Here we are going to show you how a jQuery plugin can help you create a simple but elegant Photo Gallery to display some of the best pictures in Barcelona's lifetime.

GalleryView is a plugin that provide an extensive set of options. It will allow you to adjust photos, thumbnail sizes, control not only speeds, but also element positions and transition styles.

Requirements

1. Install jQuery in Blogger
Add this code before </head> tag in your template

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

2. Install GalleryView plugin for jQuery
For an easy GalleryView installation in your blogger. Add the following code before </head> tag in your template

<!-- InstanceBeginEditable name="head" -->
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.timers-1.2.js' type='text/javascript'/>
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://spaceforaname.com/galleryview/galleryview/js/jquery.galleryview-3.0-dev.js' type='text/javascript'/>
<link href='http://spaceforaname.com/galleryview/galleryview/css/jquery.galleryview-3.0-dev.css' rel='stylesheet' type='text/css'/>
<!-- InstanceEndEditable -->

Implementation

Create an unordered list of images and add the following function call to your JavaScript code:

$('#gallery').galleryView();

Demostration

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Javascript source Code

<script>
$(function(){
   $('#myGallery').galleryView({
      panel_width: 550,
      panel_height: 300,
      autoplay: true
   });
});
</script>

For full development of this plugin please visit http://spaceforaname.com/galleryview/