jQuery Ad Gallery – Extended Photo Gallery Slideshow

Demo

Since July 2011 I am getting lots of emails asking to share the jquery.ad.gallery plugin that I have customized and extended as per the need of my project http://www.navayan.com

The jQuery Ad Gallery has very interesting features. I had chosen for following reasons:

1. Thumb and big images with gallery
2. Slideshow
3. Image with caption
4. SEO friendly caption placing
5. Scroll and fade in-out effects
6. Downloads bigger images only when requested
7. Total image count
8. Easy customizable

Even though I was not satisfied with its current behavior and there were some glitches also. So I decided to extend it.

How about different effects on different days? WOW!

Add these two lines before default settings start

var d = new Date();
var dt_effect = d.getDay() == 5 ? 'fade' : 'slide-hori'; // 5 = Friday

or set more effects

var d = new Date();
var dt_effect = '';
if (d.getDay() == 1 || d.getDay() == 2) {
  dt_effect = 'slide-hori'; // horizontal carousel
} else if (d.getDay() == 3 || d.getDay() == 4) {
  dt_effect = 'slide-vert'; // vertical sliding
} else if (d.getDay() == 5 || d.getDay() == 6) {
  dt_effect = 'fade'; // fade in-fade out effect with no sliding
} else {
  dt_effect = 'none'; // no effect
}

then call this auto date effects in

effect: dt_effect

Loader image

Developers mostly asked how my animated loader works with this plugin? But its pretty simple if you know how directory structure works in any site.

// Loader image within this plugin directory
loader_image: 'navayan-buddhist-panchsheel-animated-flag.gif'

// Loader image in images directory
loader_image: 'images/navayan-buddhist-panchsheel-animated-flag.gif'

// Loader image exist at absolute url
loader_image: 'http://cdn.navayan.com/images/navayan-buddhist-panchsheel-animated-flag.gif'

Do I really need vertical slide animation?

Most probably NO. So that you can decrease the size of the file, reduce the download time.
That’s why I removed (commented out) vertical slide effect

Lets go with the standard coding practices

There were some variables used without declaring it for example ‘old_image_left‘. If you declare a variable without using ‘var‘ the variable always becomes GLOBAL. There are reasons why not to use GLOBAL variables extensively.

Image-less navigation with CSS!

Why should I need images for left/right arrows, previous/next navigation if CSS can do the work for me?

Add this code in ‘setupElements’  for Next/Previous navigation on the bigger photo

this.gallery_info = $('<div class="ad-info fl"></div>');
this.np_arrows = $('<div class="nparrows fl tc"></div>');
this.controls.append(this.gallery_info);
this.controls.append(this.np_arrows);

and following code into ‘initNextAndPrev’ function

this.next_link = $('<div class="ad-next hand"><div class="ad-next-image nowrap size14 rnd">Next »</div></div>');
this.prev_link = $('<div class="ad-prev hand"><div class="ad-prev-image nowrap size14 rnd">« Prev</div></div>');

Another visible Previous – Next navigation! into ‘initNextAndPrev‘ function

this.parrow = $('<span class="parrow hand" title="Previous"><b><</b> Previous</span>');
this.narrow = $('<span class="narrow hand" title="Next">Next <b>></b></span>');
this.np_arrows.append(this.parrow);
this.np_arrows.append(this.narrow);

var context = this;

this.parrow.add(this.narrow).click(function() {
  if ($(this).is('.narrow')) {
    context.nextImage();
    context.slideshow.stop();
  } else {
    context.prevImage();
    context.slideshow.stop();
  };
});

Get rid of thumb scroll images (in ‘initBackAndFordward‘)

this.scroll_forward = $('<div class="ad-forward bkfor"><b class="ib"></b></div>');
this.scroll_back = $('<div class="ad-back bkfor"><b class="ib"></b></div>');

‘ratio‘ that was not required to re-declare in ‘_getContainedImageSize‘ function

var ratio = image_height / image_width;

Remove the stretchable (auto-resize) width of image description from ‘_showWhenLoaded‘ function

//var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10);
//desc.css('width', width +'px');

Ad Gallery Slideshow Start/Stop

// User loves to see underline for 'S' letter. Can be set in defaults
start_label: '<u>S</u>tart Slideshow',
stop_label: '<u>S</u>top Slideshow',

// hide 'Start' but show 'Stop' text when slideshow starts
this.start_link.hide();
this.stop_link.show();

// hide 'Stop' but show 'Start' text when slideshow stops
this.stop_link.hide();
this.start_link.show();

Remove the hover effect and opacity

As you can set the opacity and hover effect using only CSS, then it is better to remove javascript hover effect and opacity for thumbnails

from ‘findImages‘ function

//if(this.settings.thumb_opacity < 1) {
//thumbs.find('img').css('opacity', this.settings.thumb_opacity);
//};

jQuery hover from ‘findImages > thumbs‘

/*.hover(
  function() {
    if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
      $(this).find('img').fadeTo(300, 1);
    };
    context.preloadImage(i);
  },
  function() {
    if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
      $(this).find('img').fadeTo(300, context.settings.thumb_opacity);
    };
  }
*/

from ‘initNextAndPrev‘ function

//.find('div').css('opacity', 0.7);

from ‘initBackAndForward’ function

//).css('opacity', 0.6)
//$(this).css('opacity', 1);
//$(this).css('opacity', 0.6);

Essential CSS

First of all you will need Cross Browser Reset CSS Framework. And Navayan.com’s Gallery CSS to work this gallery properly

Integrate jQuery Ad Gallery with PHP and MySQL

<div id="gallery" class="ad-gallery">
  <div class="ad-image-wrapper">
    <div class="ad-image"></div>
    <img src="http://cdn.navayan.com/images/navayan-buddhist-panchsheel-animated-flag.gif" class="ad-loader" style="display: none;"/>
    <div class="ad-next" style="height: 400px;"><div class="ad-next-image" style="opacity: 0.7; display: none;"></div></div>
    <div class="ad-prev"><div class="ad-prev-image" style="opacity: 0.7;"></div></div>
  </div>

  <div class="ad-nav">
    <div class="ad-thumbs">
      <ul class="ad-thumb-list">
        <?php
          $result = mysql_query("SELECT gallery_id, gallery_title, gallery_thumb, gallery_big_image FROM gallery LIMIT 30");
          while($row = mysql_fetch_array($result)){
        ?>
            <li>
              <a href="<?php echo '/gallery/'.$row['gallery_big_image']; ?>">
                <img src="<?php echo '/gallery/thumb/'.$row['gallery_thumb']; ?>" alt="<?php echo $row['gallery_title']; ?>"/>
              </a>
            </li>
        <?php } ?>
      </ul>
    </div>
  </div>

  <div class="ad-controls sml">
    <span class="fl totalimgs">Total: <?php echo count($row['gallery_id']); ?></span>
    <p class="nyPaginateGal fr">Pages: <?php echo $pagination_result; ?></p>
  </div>

</div>

Attach ad gallery to your selector

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.ad-gallery').adGallery();
  });
</script>

See working example demo

Download the source

You might also like:

• WordPress Plugins
• jQuery Plugins
• AngularJS