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/

Barcelona coaches jQuery UI Widgets

jQuery is a new kind of JavaScript Library.

Barcelona introduces the basics in jquery UI widgets

---

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery is free, open source software, designed to make it easier to navigate a document, select DOM elements, create animations, and handle events. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

---

jQuery Widgets.

jQuery offers a big variety of widgets. Here, the Barcelona team will show how to use the basic ones:

---

BUTTON

Source Code

<script>
$(function() {
  $("input.jbutton").button();
});
</script>
<div>
  <input type="submit" class="jbutton" value="Like Barcelona Link" />
</div>

---

DATEPICKER

Next Barcelona Match:

Source Code

<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>
<div>
  <p>Next Barcelona Match: <input id="datepicker" type="text"></p>
</div> 

DIALOG

This is an animated dialog which is useful for displaying any Barcelona information.

Source Code

<script>
$(function() {

$("#opener").button();

$("#dialog").dialog({
  autoOpen: false,
  show: "blind",
  hide: "explode"
});

$("#opener").click(function() {
  $("#dialog").dialog( "open" );
    return false;
  });
});
</script>
<div>
  <div id="dialog" title="Welcome to FC Barcelona">
    <p>This is an animated dialog which is useful for displaying any Barcelona information.</p>
  </div>  
  <button id="opener">Open Barcelona Dialog</button>
</div>

---

SLIDER

Leonel Messi price tag: (Millions)

Source Code

<script>
$(function() {
$( "#slider-range" ).slider({
 range: true,
 min: 0,
 max: 400,
 values: [ 220, 280 ],
 slide: function( event, ui ) {
  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
 }
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
 " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<div>
  <p>
   <label for="amount">Leonel Messi price tag: (Millions)</label>
   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>
  <div id="slider-range"></div>
</div>

PROGRESSBAR

Source Code

<script>
$(function() {
  $( "#progressbar" ).progressbar({
   value: 59
  });
});
</script>
<div>
  <div id="progressbar"></div>
</div>