Jump to content

Problem with linking hyperlinks to images in a javascript slideshow

Calamity-Clare

By Calamity-Clare
in Javascript Help

Recommended Posts

Calamity-Clare Newbie

Calamity-Clare

Posted
Posted

I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images.

 

I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work.

 

I have made it work when I just simplely have the image showing without turning it into a hyperlink. It's the adding the hyperlink that I'm having issues with ...

 

This is the slideshow code:

window.onload = initAll;

var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">')
var thisUrl = 0;

var gallery = new Array("portfolio_ota.jpg", "portfolio_bashbrothers.jpg");
var thisImage = 0;

var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website");
var thisTitle = 0;

var gallery_number = new Array("1", "2");
var thisNumber = 0;

function initAll() {
document.getElementById("previous").onclick = processPrevious;
document.getElementById("next").onclick = processNext;
}

function processPrevious () {
  if (thisUrl == 0) {
    thisUrl = gallery_url.length;
    }
    thisImage--;
    document.getElementById("view_portfolio").innerHTML = gallery_url[thisUrl]+'<img src="'+thisImage+'" alt="" width="450" height="317" border="0" /></a>'
    document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
    document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
    return false;
    }

function processNext () {
   thisImage++;
   if (thisUrl == gallery_url.length) {
    thisUrl = 0;
    }
    document.getElementById("view_portfolio").innerHTML = gallery_url[thisUrl]+'<img src="'+thisImage+'" alt="" width="450" height="317" border="0" /></a>'
    document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
    document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
    return false;
    }

 

The section of HTML that it directly relates to is:

<div id="view_portfolio">   </div>
<p><span class="darkgrey"><span id="portfolio_number">1</span>/2</span> <span id="portfolio_title">The Options Trading Australia Website</span></p>

 

I can't find the problem. Could it be in the HTML instead of the javascript? Does anyone have any suggestions? I've looked at so many websites & forums, but as far as I can tell, it should work ...

 

I've attached the HTML code & javascript as text files. The slideshow is at www.clarebyrnedesign.com.au

 

Thanks!

 

[attachment deleted by admin]

Omirion Member

Omirion

Posted
Posted

Hi, i couldn't figure out what was wrong with your script but i took the liberty to write my own and adjust it to the way you have set up you image gallery.

 

Here it is:

window.onload = initAll;
var pointer = 0; //position of the currant image


var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">') //array of links

var gallery = new Array("a.jpg", "b.jpg"); //array of images

var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website"); //tittles

var gallery_number = new Array("1", "2"); // number

function initAll() { //assign events 
document.getElementById("previous").onclick = processPrevious;
document.getElementById("next").onclick = processNext;
}


function processPrevious () {
if (pointer == 0){ // if pointer is at the first image
	pointer = gallery_url.length - 1; // jump to the last
} else {
	pointer-- // if else decrement pointer
}
imageShow(pointer); // show image, pass in pointer
}


function processNext () {
if (pointer == gallery_url.length - 1){ // if pointer is at last image
	pointer = 0 //move to first
} else {
	pointer++ //else increment
}
imageShow(pointer); // show image , pass in pointer
}

function imageShow(position){ 
	var image = document.getElementById('view_portfolio');
	var num = document.getElementById('portfolio_number');
	var name = document.getElementById('portfolio_title');
	image.innerHTML = gallery_url[position.toString()]+'<IMG src="'+gallery[position.toString()]+'"></a>' ;
	num.innerHTML = position ;
	name.innerHTML = position ;
}

 

You have to make some adjustments like load the first picture at page load or something like that hope you can manage from here on.

 

If not, post here and i can guide you trough the process.

 

Also the way the gallery is set up is not a best approach.

 

First off all avoid using global variables. Instead brush up on prototyping aka OOP in JS.

  • 3 years later...
Finni Newbie

Finni

Posted
Posted

Hi  Iam new to java, can you help me with a problem?

http://www.plusgallery.net/

 

i want to make a gallery (google album) for my website

 

can any one explain me this?

 

can u make a video on this.

 

 

 

 

/*
 * +Gallery Javascript Photo gallery v0.9.4
 *
 * Copyright 2013, Jeremiah Martin | Twitter: @jeremiahjmartin
 * Dual licensed under the MIT and GPL licenses:
 
 */
 
 
jQuery.ajaxSetup({ cache: false });
/*
SLIDEFADE
------------------------------------------------------------------------------------------------------*/
 
/* Custom plugin for a slide/in out animation with a fade - JJM */
 
(function ($) {
  $.fn.slideFade = function (speed, callback) {
    var slideSpeed;
    for (var i = 0; i < arguments.length; i++) {
      if (typeof arguments == "number") {
        slideSpeed  = arguments;
      }
      else {
        var callBack = arguments;
      }
    }
    if(!slideSpeed) {
      slideSpeed = 500;
    }
    this.animate({
        opacity: 'toggle',
        height: 'toggle'
      }, slideSpeed,
      function(){
        if( typeof callBack != "function" ) { callBack = function(){}; }
        callBack.call(this);
      }
    );
  };
})( jQuery );
 
(function ($){
  $.fn.plusGallery = function(options){
    var lmnt = this;
    if(lmnt.length === 0) { return false; }
    var pg = {
      /*user defined Defaults*/
      imagePath: 'images/plusgallery',
      type: 'google',
      albumTitle: false, //show the album title in single album mode
      albumLimit: 16, //Limit amout of albums to load initially.
      limit: 30, //Limit of photos to load for gallery / more that 60 is dumb, separate them into different albums
      apiKey: '', //used with Flickr
      exclude: null,
      include: null,
      imageData: null,
 
      
      /*don't touch*/
      imgArray: [],
      titleArray: [],
      t: '', //timer
      idx: 0,
      imgCount: 0,
      imgTotal: 0,
      winWidth: 1024, //resets
      touch: false,
      titleText: '',
      
      init: function(){
        var _doc = $(document);
        //check for touch device
        if ("ontouchstart" in document.documentElement) {
          window.scrollTo(0, 1);
          pg.touch = true;
        }
        
        pg.winWidth = $(window).width();
        
        //reset some shit in case there is another copy that was loaded.
        $('#pgzoomview').remove();
        //Unbind everything first? 
        _doc.off("click", ".pgalbumlink, #pgthumbhome, .pgthumb, .pgzoomarrow, .pgzoomclose, #pgzoomview, #pgzoomslide, .pgzoomimg");
 
        pg.getDataAttr();
        
        pg.writeHTML();
        if(pg.albumId !== null
          || pg.type == 'instagram'
          || (pg.type == 'local' && !pg.imageData.hasOwnProperty('albums'))){
          //load single Album
          pg.loadSingleAlbum();
        }
        else if(pg.type == 'local') {
          pg.parseAlbumData(pg.imageData);
        }
        else {
          pg.loadAlbumData();
        }
        
        
        
        //attach loadGallery to the album links
        _doc.on("click", ".pgalbumlink",function(e){
          e.preventDefault();
          $(this).append('<span class="pgloading"></span>');
          var galleryTitle = $(this).children('span').html();
          if(pg.type == 'local') {
var galleryID = $(this).attr('data-album-index').replace('http://', '').replace('//', '').replace('https://' '');
            pg.parseData(pg.imageData.albums[galleryID],galleryTitle);
          } else {
            var galleryURL = this.href;
            pg.loadGallery(galleryURL,galleryTitle);
          }
        });
        
        _doc.on("click", "#pgthumbhome",function(e){
          e.preventDefault();
          $('#pgthumbview').slideFade(700);
          $('#pgalbums').slideFade(700);
        });
        
        //attach links load detail image
        _doc.on('click','.pgthumb',function(e){
          e.preventDefault();
          var idx = $('.pgthumb').index(this);
          pg.loadZoom(idx);
        });
        
        /*zoom events*/
        _doc.on('click','.pgzoomarrow',function(e){
          e.preventDefault();
          var dir = this.rel;
          pg.prevNext(dir);
          return false;
        });
        
        _doc.on('click','.pgzoomclose',function(e){
          e.preventDefault();
          pg.unloadZoom();
        });
        _doc.on("click", "#pgzoomview",function(e){
          e.preventDefault();
          pg.unloadZoom();
        });
        
        _doc.on("click", "#pgzoomslide",function(){
          pg.unloadZoom();
        });
        
        _doc.on("click", ".pgzoomimg",function(){
if($(this).attr('id').replace('pgzoomimg', '') < pg.imgTotal - 1) {
pg.prevNext('next');
}
          return false;
        });
        
        clearTimeout(pg.t);
      },
      
      /*--------------------------
      
        get all the user defined
        variables from the HTML element
      
      ----------------------------*/
      getDataAttr: function(){
        //Gallery Type *required
        var dataAttr = lmnt.attr('data-type');
        if(dataAttr) {
          pg.type = dataAttr;
        }
        else {
          alert('You must enter a data type.');
          return false;
        }
        
        //Gallery User Id *required if not local
        dataAttr = lmnt.attr('data-userid');
        if(dataAttr) {
          pg.userId = dataAttr;
        }
        else if(pg.type != 'local') {
          alert('You must enter a valid User ID');
          return false;
        }
        
        //Limit on the amount photos per gallery
        dataAttr = lmnt.attr('data-limit');
        if(dataAttr) {
          pg.limit = dataAttr;
        }
        
        //Limit on the amount albums
        dataAttr = lmnt.attr('data-album-limit');
        if(dataAttr) {
          pg.albumLimit = dataAttr;
        }
        
        //album id to exclude
        dataAttr = lmnt.attr('data-exclude');
        if(dataAttr) {
          pg.exclude = dataAttr.split(',');
        }
 
        //album ids to include
        dataAttr = lmnt.attr('data-include');
        if(dataAttr) {
          pg.include = dataAttr.split(',');
        }
        
        //Api key - used with Flickr
        dataAttr = lmnt.attr('data-api-key');
        if(dataAttr) {
          pg.apiKey = dataAttr;
        }
        
        //Access Token - used with instagram
        dataAttr = lmnt.attr('data-access-token');
        if(dataAttr) {
          pg.accessToken = dataAttr;
        }
        dataAttr = lmnt.attr('data-album-id');
        if(dataAttr) {
          pg.albumId = dataAttr;
          
          //show hide the album title if we are in single gallery mode
          titleAttr = lmnt.attr('data-album-title');
          
          if(titleAttr == 'true') {
            pg.albumTitle = true;
          } else {
            pg.albumTitle = false;
          }
        }
        else {
          pg.albumTitle = true;
          pg.albumId = null;
        }
        
        dataAttr = lmnt.attr('data-credit');
        if(dataAttr == 'false') {
          pg.credit = false;
        }
        else {
          pg.credit = true;
        }
 
        //Image path
        dataAttr = lmnt.attr('data-image-path');
        if(dataAttr) {
            pg.imagePath = dataAttr;
        }
        
        //JSON string containing image data *required only for local
        dataAttr = lmnt.attr('data-image-data');
        if(dataAttr) {
          pg.imageData = JSON.parse(dataAttr);
        }
      },
      
      /*--------------------------
      
        set up the initial HTML
      
      ----------------------------*/
      writeHTML: function(){
        var touchClass;
        if(pg.touch){
          touchClass = 'touch';
          lmnt.addClass('touch');
        }
        else {
          touchClass = 'no-touch';
          lmnt.addClass('no-touch');
        }
        
        lmnt.append(
          '<ul id="pgalbums" class="clearfix"></ul>' +
          '<div id="pgthumbview">' +
            '<ul id="pgthumbs" class="clearfix"></ul>' +
          '</div>'
        );
        $('body').prepend(
          '<div id="pgzoomview" class="pg ' + touchClass + '">' +
            '<a href="#" rel="previous" id="pgzoomclose" title="Close">Close</a>' +
            '<a href="#" rel="previous" id="pgprevious" class="pgzoomarrow" title="previous">Previous</a>' +
            '<a href="#" rel="next" id="pgnext" class="pgzoomarrow" title="Next">Next</a>' +
            '<div id="pgzoomscroll">' +
              '<ul id="pgzoom"></ul>' +
            '</div>' +
          '</div>'
          );
        
        lmnt.addClass('pg');
        
        if(pg.credit === true) {
          lmnt.append('<div id="pgcredit"><a href="http://www.plusgallery.net" target="_blank" title="Powered by +GALLERY"><span>+</span>Gallery</a></div>');
        }
        
        //console.log('pg.albumTitle: ' + pg.albumTitle);
        
        if(pg.albumTitle === true) {
          $('#pgthumbview').prepend('<ul id="pgthumbcrumbs" class="clearfix"><li id="pgthumbhome">«</li></ul>');
        }
      },
      
      
      /*--------------------------
      
        Parse the album data from
the given json string.
      
      ----------------------------*/
      parseAlbumData: function(json) {
        lmnt.addClass('loaded');
        var objPath,
            albumTotal,
            galleryImage,
            galleryTitle,
            galleryJSON;
 
        switch(pg.type)
        {
        //have to load differently for for google/facebook/flickr
        case 'google':
        
          objPath = json.feed.entry;
          albumTotal = objPath.length;
              
          if(albumTotal > pg.albumLimit) {
            albumTotal = pg.albumLimit;
          }
          
          //remove excluded galleries if there are any.
          //albumTotal = albumTotal - pg.exclude.length;
        
          if(albumTotal > 0){
            $.each(objPath,function(i,obj){
              //obj is entry
              if(i < albumTotal){
                galleryTitle = obj.title.$t;
                galleryJSON = obj.link[0].href;
                galleryImage = obj.media$group.media$thumbnail[0].url;
                galleryImage = galleryImage.replace('s160','s210');
              
                pg.loadAlbums(galleryTitle,galleryImage,galleryJSON,i);
              }
  
            });
          }
          else { //else if albumTotal == 0
            alert('There are either no results for albums with this user ID or there was an error loading the data. \n' + galleryJSON);
          }
        break;
        case 'flickr':
          objPath = json.photosets.photoset;
          albumTotal = objPath.length;
              
          if(albumTotal > pg.albumLimit) {
            albumTotal = pg.albumLimit;
          }
              
          if(albumTotal > 0 ) {
            $.each(objPath,function(i,obj){
              //obj is entry
              if(i < albumTotal){
                galleryTitle = obj.title._content;
                galleryImage = 'http://farm' + obj.farm + '.staticflickr.com/' + obj.server + '/' + obj.primary + '_' + obj.secret + '_n.jpg';
                galleryJSON = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + pg.apiKey + '&photoset_id=' + obj.id + '=&format=json&jsoncallback=?';
    
                pg.loadAlbums(galleryTitle,galleryImage,galleryJSON);
              }
            });
          }
          else { //else if albumTotal == 0
            alert('There are either no results for albums with this user ID or there was an error loading the data. \n' + galleryJSON);
          }
        break;
        case 'facebook':
          objPath = json.data;
          albumTotal = objPath.length;
              
          if(albumTotal > pg.albumLimit) {
            albumTotal = pg.albumLimit;
          }
              
          if(albumTotal > 0) {
            $.each(objPath,function(i,obj){
              if(i < albumTotal){
                galleryTitle = obj.name;
                galleryJSON = 'https://graph.facebook.com/' + obj.id + '/photos?limit=' + pg.limit + '&access_token=' + pg.accessToken;
                galleryImage = 'http://graph.facebook.com/' + obj.id + '/picture?type=album';
                pg.loadAlbums(galleryTitle,galleryImage,galleryJSON);
              }
              
            });
          }
          else {
            alert('There are either no results for albums with this user ID or there was an error loading the data. \n' + albumURL);
          }
          break;
        case 'local':
          objPath = json.albums;
          albumTotal = objPath.length;
          
          if(albumTotal > pg.albumLimit) {
            albumTotal = pg.albumLimit;
          }
              
          if(albumTotal > 0 ) {
            $.each(objPath,function(i,obj){
              //obj is entry
              if(i < albumTotal){
                galleryTitle = obj.title;
                galleryImage = obj.images[0].th;
                galleryJSON = 'http://'+i;
    
                pg.loadAlbums(galleryTitle,galleryImage,galleryJSON);
              }
            });
          }
          else { //else if albumTotal == 0
            alert('There are no albums available in the specified JSON.');
          }
          break;
        }
      },
      
      
      /*--------------------------
      
        Load up Album Data JSON
        before Albums
      
      ----------------------------*/
      loadAlbumData: function() {
        var albumURL;
        switch(pg.type)
        {
        case 'google':
          albumURL = 'https://picasaweb.google.com/data/feed/base/user/' + pg.userId + '?alt=json&kind=album&hl=en_US&max-results=' + pg.albumLimit + '&callback=?';
          break;
        case 'flickr':
          albumURL = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getList&api_key=' + pg.apiKey + '&user_id=' + pg.userId + '&format=json&jsoncallback=?';
          break;
        case 'facebook':
          albumURL = 'https://graph.facebook.com/' + pg.userId + '/albums?limit=' + pg.albumLimit + '&access_token=' + pg.accessToken + '&callback=?';
          break;
        case 'instagram':
          //we ain't got no albums in instagram
          albumURL = null;
          break;
        case 'local':
          // No album support yet, but url wont be needed anyway.
          albumURL = null;
          break;
    
        default:
          alert('Please define a gallery type.');
        }
        
        $.getJSON(albumURL,function(json) {
          pg.parseAlbumData(json);
        });
      },
      
      
      /*--------------------------
      
        Load all albums to the page
      
      ----------------------------*/
      loadAlbums: function(galleryTitle,galleryImage,galleryJSON) {
        var displayAlbum = true;
        var imgHTML;
        
        //exclude albums if pg.exclude is set
        if(pg.exclude !== null) {
          $.each(pg.exclude,function(index, value){ //exclude albums if pg.exclude is set
            if(galleryJSON.indexOf(value) > 0){
              displayAlbum = false;
            }
          });
        }
 
 
        //include only specified albums if pg.include is set
        if(pg.include !== null) {
          displayAlbum = false;
          $.each(pg.include,function(index, value){ //exclude albums if pg.exclude is set
            if(galleryJSON.indexOf(value) > 0){
              displayAlbum = true;
            }
          });
        }
                                   
                                   
        if (displayAlbum){
          if (pg.type == 'facebook' || pg.type == 'flickr') {
            imgHTML = '<img src="'+ pg.imagePath + '/square.png" style="background-image: url(' + galleryImage + ');" title="' + galleryTitle + '" title="' + galleryTitle + '" class="pgalbumimg">';
          }
          else {
            imgHTML = '<img src="' + galleryImage + '" title="' + galleryTitle + '" title="' + galleryTitle + '" class="pgalbumimg">';
          }
          
if(pg.type == 'local') {
$('#pgalbums').append(
'<li class="pgalbumthumb">' +
'<a href="#" data-album-index="' + galleryJSON + '" class="pgalbumlink">' + imgHTML + '<span class="pgalbumtitle">' + galleryTitle + '</span><span class="pgplus">+</span></a>' +
'</li>'
);
} else {
$('#pgalbums').append(
'<li class="pgalbumthumb">' +
'<a href="' + galleryJSON + '" class="pgalbumlink">' + imgHTML + '<span class="pgalbumtitle">' + galleryTitle + '</span><span class="pgplus">+</span></a>' +
'</li>'
);
}
        }
        
        
          
      
      }, //End loadAlbums
      
      
      /*--------------------------
      
        Load all the images within
        a specific gallery
      
      ----------------------------*/
      loadSingleAlbum:function(){
        var url;
        switch(pg.type)
        {
        case 'google':
          url = 'https://picasaweb.google.com/data/feed/base/user/' + pg.userId + '/albumid/' + pg.albumId + '?alt=json&hl=en_US';
          pg.loadGallery(url);
          break;
        case 'flickr':
          url = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + pg.apiKey + '&photoset_id=' + pg.albumId + '=&format=json&jsoncallback=?';
          pg.loadGallery(url);
          break;
        case 'facebook':
          url = 'https://graph.facebook.com/' + pg.albumId + '/photos?limit=' + pg.limit + '&access_token=' + pg.accessToken;
          pg.loadGallery(url);
          break;
        case 'instagram':
          url = 'https://api.instagram.com/v1/users/' + pg.userId + '/media/recent/?access_token=' + pg.accessToken + '&count=' + pg.limit;
          pg.loadGallery(url);
          break;
        case 'local':
          pg.parseData(pg.imageData);
          break;
        }
        
        lmnt.addClass('loaded');
        $('#pgthumbhome').hide();
        
      },
      
      /*--------------------------
      
        Load all the images within
        a specific gallery
      
      ----------------------------*/
      loadGallery: function(url,title){
        pg.imgArray = [];
        pg.titleArray = [];
        $('#pgzoom').empty();
        $.ajax({
          url: url,
          cache: false,
          dataType: "jsonp",
          success: function(json){
            pg.parseData(json,title);
          }, //end success
          error: function(jqXHR, textStatus, errorThrown){
            console.log('Error: \njqXHR:' + jqXHR + '\ntextStatus: ' + textStatus + '\nerrorThrown: '  + errorThrown);
          }
        });
      }, //End loadGallery
      
      
      /*--------------------------
      
        Parse and convert the data
        of the gallery
      
      ----------------------------*/
      parseData: function(json,title){
        var obPath,
            imgTitle,
            imgSrc,
            imgTh,
            imgBg = '',
            thumbsLoaded = 0,
            zoomWidth,
            flickrImgExt;
 
        $('.crumbtitle').remove();
        $('#pgthumbs').empty();
        if(title === undefined){
          title = ' ';
        }
        $('#pgthumbcrumbs').append('<li class="crumbtitle">' + title + '</li>');
      
        switch(pg.type)
        {
        case 'google':
          objPath = json.feed.entry;
          break;
        case 'flickr':
          objPath = json.photoset.photo;
          break;
        case 'facebook':
          objPath = json.data;
          break;
        case 'instagram':
          objPath = json.data;
          break;
        case 'local':
          objPath = json.images;
          break;
        }
        
        pg.imgTotal = objPath.length;
        //limit the results
        if(pg.limit < pg.imgTotal){
          pg.imgTotal = pg.limit;
        }
        
        if(pg.imgTotal === 0) {
          alert('Please check your photo permissions,\nor make sure there are photos in this gallery.');
        }
 
        if(pg.winWidth > 1100) {
          zoomWidth = 1024;
          flickrImgExt = '_b';
        } else if(pg.winWidth > 620) {
          zoomWidth = 768;
          flickrImgExt = '_b';
        } else {
          zoomWidth = 540;
          flickrImgExt = '_z';
        }
 
        $.each(objPath,function(i,obj){
          //limit the results
          if(i < pg.limit) {
            switch(pg.type)
            {
            case 'google':
              imgTitle = obj.title.$t;
              imgSrc = obj.media$group.media$content[0].url;
              var lastSlash = imgSrc.lastIndexOf('/');
              var imgSrcSubString =imgSrc.substring(lastSlash);
              
              //show the max width image 1024 in this case
              imgSrc = imgSrc.replace(imgSrcSubString, '/s' + zoomWidth + imgSrcSubString);
              
              imgTh = obj.media$group.media$thumbnail[1].url;
              imgTh = imgTh.replace('s144','s160-c');
              break;
            case 'flickr':
              imgTitle = obj.title;
              imgSrc = 'http://farm' + obj.farm + '.staticflickr.com/' + obj.server + '/' + obj.id + '_' + obj.secret + flickrImgExt + '.jpg';
              imgTh = 'http://farm' + obj.farm + '.staticflickr.com/' + obj.server + '/' + obj.id + '_' + obj.secret + '_q.jpg';
              break;
            case 'facebook':
              imgTitle = obj.name;
              imgSrc = obj.images[1].source;
              imgTh = pg.imagePath + '/square.png';
              imgBg = ' style="background: url(' + obj.images[3].source + ') no-repeat 50% 50%; background-size: cover;"';
              break;
            case 'instagram':
              if(obj.caption !== null){
                imgTitle = obj.caption.text;
              }
              imgSrc = obj.images.standard_resolution.url;
              imgTh = obj.images.low_resolution.url;
              break;
            case 'local':
              if(obj.caption !== null){
                imgTitle = obj.caption;
              }
              imgSrc = obj.src;
              imgTh = obj.th;  
              break;
            }
            
            if(!imgTitle) {
              imgTitle = '';
            }
                
            pg.imgArray = imgSrc;
            pg.titleArray = imgTitle;
            
            $('#pgthumbs').append('<li class="pgthumb"><a href="' + imgSrc + '"><img src="' + imgTh + '" id="pgthumbimg' + i + '" class="pgthumbimg" alt="' + imgTitle + '" title="' + imgTitle + '"' + imgBg + '></a></li>');
            
            //check to make sure all the images are loaded and if so show the thumbs
            $('#pgthumbimg' + i).load(function(){
              thumbsLoaded++;
              if(thumbsLoaded == pg.imgTotal) {
                $('#pgalbums').slideFade(700,function(){
                $('.pgalbumthumb .pgloading').remove();
              });
              $('#pgthumbview').slideFade(700);
              }
          });
          } //end if(i < pg.limit)
        }); //end each
      },
      
      zoomIdx: null, //the zoom index
      zoomImagesLoaded: [],
      zoomScrollDir: null,
      zoomScrollLeft: 0,
      loadZoom: function(idx){
        pg.zoomIdx = idx;
        pg.winWidth = $(window).width();
        var pgZoomView = $('#pgzoomview'),
            pgZoomScroll = $('#pgzoomscroll'),
            pgPrevious = $('#pgprevious'),
            pgNext = $('#pgnext'),
            pgZoom = $('#pgzoom'),
            pgZoomHTML = '',
            totalImages = pg.imgArray.length;
        pgZoomView.addClass('fixed');
        
        //show/hide the prev/next links
        if(idx === 0) {
          pgPrevious.hide();
        }
        
        if(idx == totalImages - 1) {
          pgNext.hide();
        }
    
        var pgzoomWidth = pg.imgArray.length * pg.winWidth;
        $('#pgzoom').width(pgzoomWidth);
        
        var scrollLeftInt = parseInt(idx * pg.winWidth);
        
          
        pgZoomView.fadeIn(function(){
          //this has gotta come in after the fade or iOS blows up.
          
          $(window).on('resize',pg.resizeZoom);
          
          $.each(pg.imgArray,function(i){
            pgZoomHTML = pgZoomHTML  + '<li class="pgzoomslide loading" id="pgzoomslide' + i + '" style="width: ' + pg.winWidth + 'px;"><img src="' + pg.imagePath + '/square.gif" class="pgzoomspacer"><span class="pgzoomcaption">' + pg.titleArray + '</span></li>';
    
            if(i + 1 == pg.imgArray.length) {
              //at the end of the loop
                $('#pgzoom').html(pgZoomHTML);
                
                pg.zoomKeyPress();
                $('#pgzoomscroll').scrollLeft(scrollLeftInt);
                pg.zoomScrollLeft = scrollLeftInt;
                pg.loadZoomImg(idx);
                pg.zoomScroll();
                //load siblings
                if((idx - 1) >= 0){
                pg.loadZoomImg(idx - 1);
                }
                
                if((idx + 1) < pg.imgArray.length){
                  pg.loadZoomImg(idx + 1);
                }
              }
            });
          });
      },
      
      
      loadZoomImg:function(idx){
        if($('#pgzoomimg' + idx).length === 0){
          $('#pgzoomslide' + idx + ' .pgzoomspacer').after('<img src="' + pg.imgArray[idx] + '" data-src="' + pg.imgArray[idx] + '" title="' + pg.titleArray[idx] + '" alt="' + pg.titleArray[idx] + '" id="pgzoomimg' + idx + '" class="pgzoomimg">');
          $('#pgzoomimg' + idx).load(function(){
            $(this).addClass('active');
          });
        }
      },
      
      zoomScroll:function(){
        var pgPrevious = $('#pgprevious'),
            pgNext = $('#pgnext'),
            scrollTimeout,
            canLoadZoom = true;
            
    
        $('#pgzoomscroll').on('scroll',function(){
          currentScrollLeft = $(this).scrollLeft();
          if(canLoadZoom === true) {
            canLoadZoom = false;
            scrollTimeout = setTimeout(function(){
              if(currentScrollLeft === 0){
                pgPrevious.fadeOut();
              }
              else {
                pgPrevious.fadeIn();
              }
              
              if(currentScrollLeft >= (pg.imgTotal - 1) * pg.winWidth){
              pgNext.fadeOut();
              }
              else {
                pgNext.fadeIn();
              }
              
              /*Check if we have scrolled left and if so load up the zoom image*/
              if(currentScrollLeft % pg.zoomScrollLeft > 20 || (currentScrollLeft > 0 && pg.zoomScrollLeft === 0)){
                pg.zoomScrollLeft = currentScrollLeft;
                var currentIdx = pg.zoomScrollLeft / pg.winWidth;
                
                var currentIdxCeil = Math.ceil(currentIdx);
                var currentIdxFloor = Math.floor(currentIdx);
                
                //Lazy load siblings on scroll.
                if(!pg.zoomImagesLoaded[currentIdxCeil]) {
                  pg.loadZoomImg(currentIdxCeil);
                }
                if(!pg.zoomImagesLoaded[currentIdxFloor]){
                  pg.loadZoomImg(currentIdxFloor);
                }
              }
              canLoadZoom = true;
            },200);
          }
        });
      },
      
      zoomKeyPress: function(){
        $(document).on('keyup','body',function(e){
          if(e.which == 27){
            pg.unloadZoom();
          }
          else
          if(e.which == 37){
            pg.prevNext('previous');
          }
          else
          if(e.which == 39){
            pg.prevNext('next');
          }
        });
      },
      
      resizeZoom: function(){
        pg.winWidth = $(window).width();
        var pgzoomWidth = pg.imgArray.length * pg.winWidth;
        $('#pgzoom').width(pgzoomWidth);
        $('.pgzoomslide').width(pg.winWidth);
        
        var scrollLeftInt = parseInt(pg.zoomIdx * pg.winWidth);
        
        $('#pgzoomscroll').scrollLeft(scrollLeftInt);
      },
      
      unloadZoom: function(){
        $(document).off('keyup','body');
        $(window).off('resize',pg.resizeZoom);
        $('#pgzoomscroll').off('scroll');
        $('#pgzoomview').fadeOut(function(){
          $('#pgzoom').empty();
          $('#pgzoomview').off('keyup');
          $('#pgzoomview').removeClass('fixed');
        });
          
      },
      
      prevNext: function(dir){
        var currentIdx = $('#pgzoomscroll').scrollLeft() / pg.winWidth;
        
        if(dir == "previous"){
          pg.zoomIdx = Math.round(currentIdx)  - 1;
        }
        else {
          pg.zoomIdx = Math.round(currentIdx) + 1;
        }
        
        var newScrollLeft = pg.zoomIdx * pg.winWidth;
        
        $('#pgzoomscroll').stop().animate({scrollLeft:newScrollLeft});
      }
    };
    
    $.extend(pg, options);
    pg.init();
  };

})( jQuery ); 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.