Jump to Navigation

Simple Javascript Image Gallery

  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.
  • strict warning: Declaration of views_handler_field::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_field.inc on line 1148.
  • strict warning: Declaration of views_handler_sort::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_handler_filter::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_plugin_query::options_submit() should be compatible with views_plugin::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_query.inc on line 181.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 24.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_row.inc on line 136.
  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.

Recent Comments

There are a number of ways you could go about "pausing" the slideshow on hover.  I would take a...

Hi,
I love the featured content fader... I actually prefer this over a traditional slider because the effect...

Hi,
Thanks for your posting. It is a great image gallery.
Thanks again. Regards.

Great example, this is a good basic structure for anyone who is new to web development. Thanks.

Hey Tom,

Working with arrays in javascript is pretty easy.  First off you'll need to declare it...

Simple Javascript Image Gallery

An image gallery can be a great tool to display images, featured products, news items or just about anything else! :)  

The following tutorial will show you how to build a simple yet effective image gallery using html, css and a bit of jQuery.  For those who have never used jQuery before you might want to check out the jQuery website for more information.  

The HTML:

<div id="images_full">
  <img src="/images/full_image/image1.png" />
</div>

<div id="images_thumbnails">
  <a href="/images/full_image/images1.png">
    <img src="/images/thumbnail/image1.png" />
  </a>
  <a href="/images/full_image/images2.png">
    <img src="/images/thumbnail/image2.png" />
    </a>
  <a href="/images/full_image/images3.png">
    <img src="/images/thumbnail/image3.png" />
  </a>
</div>

The CSS:

#images_full img,
#images_thumbnails img {
  padding:3px;
  border:1px solid #CCC;
}

#images_thumbnails img {
  margin:4px;
}

The jQuery:

$('#images_thumbnails a').click(function(){
  var newImageSrc = $(this).attr('href');
  $('#images_full img').attr({'src': newImageSrc });
  return false;
});

The Demo:

Comments

Hi,
Thanks for your posting. It is a great image gallery.
Thanks again. Regards.

Thank you for posting this. I am a newbie to javascript and jQuery and I get very lost when I try to follow most examples on the web. This is a simple yet effective example. Thanks!

Post new comment