Hi! I need help! My web designer has gone MIA, and I'm taking over - I need to add more photos to the photo gallery. it looks like they used something called "gallerific" - a Jalbum thing according to google. I think what I'm wanting to make changes to is: <?php echo $photo_html;?> but I can't figure out where/how to do this. I am working in Dreamweaver CS3. the body of the page is below: <body> <center> <table class="main" align="center" cellpadding="0" cellspacing="0" height="100%"> <tr> <td valign="top" colspan="2"><?php include('header.php');?></td> </tr> <tr> <td valign="top" height="100%"><?php include('nav.php');?></td> <td valign="top" style="padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0" class="content"> <tr> <td valign="top" style="background:url(images/pagehdl.jpg) top center no-repeat; padding:5px;" width="764" align="center"><strong>Photo Gallery</strong></td> </tr> <tr> <td valign="top" align="center"> <div id="thumbs-adv" class="navigation"> <table cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="center"> <ul class="thumbs noscript"> <?php echo $photo_html;?> </ul> </td></tr></table> </div> <center> <div id="controls-adv" class="controls"></div> </center> <div id="gallery-adv" class="content"> <center> <div id="slideshow-adv" class="slideshow"></div> </center> <!-- <div id="loading-adv" class="loader"></div> <div id="caption-adv" class="embox"></div>--> </div> </td> </tr> </table> </td> </tr> </table> <?php include('footer.php');?> <script> var onMouseOutOpacity = 0.67; $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { // Initialize Advanced Galleriffic Gallery var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay: 2000, numThumbs: 10, preloadAhead: 8, enableTopPager: true, enableBottomPager: true, imageContainerSel: '#slideshow-adv', controlsContainerSel: '#controls-adv', captionContainerSel: '#caption-adv', loadingContainerSel: '#loading-adv', renderSSControls: true, renderNavControls: true, playLinkText: 'Play Slideshow', pauseLinkText: 'Pause Slideshow', prevLinkText: '‹ Previous Photo', nextLinkText: 'Next Photo ›', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: true, autoStart: false, onChange: function(prevIndex, nextIndex) { $('#thumbs-adv ul.thumbs').children() .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() .eq(nextIndex).fadeTo('fast', 1.0); }, onTransitionOut: function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn: function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut: function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn: function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); // Initialize Minimal Galleriffic Gallery var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel: '#slideshow-min', controlsContainerSel: '#controls-min' }); }); </script> </center> </body>
Hi Jessica, It seemed what you need is accessed to the PHP code since it will generate list with the images inside it. <ul class="thumbs noscript"> <?php echo $photo_html;?> </ul> HTML: The $photo_html variable will generate the somehing like <li> <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a> </li> <li> <a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a> </li> HTML: ... etc. So make sure the $photo_html variable generate those codes. Hope that helps.
Thanks jpratama. That helps, but I'm still a bit lost. how do I find the php code? When I do, do i just add more codes, but with different images. Also, do I need to put the photos on flickr?
Did you already try to upload your images to flickr ? If the script connect to your flickr account, what you have to do is upload it to flickr and the page will showed your flickr images. It depends on the system that your web developer built. Usually the php script file ended with .php extension. You just have to find the correct one which relate with your gallery page. You don't need to add more codes if the php script already running well which I assumed it is. Usually you just have to upload those images through the php script which running at the web server if the system doesn't connect to flickr.
Thanks - it's not my flickr account though, the web developer did it, and is M.I.A. Would I upload the gallery to flickr, along with the new images I want on the site, then where the code is, put the new flickr code?
If it is connected to the flickr already then it should be automatically appear when you update your flickr images. I can't tell you further because I don't know what system you had. I can only give suggestion as far based on the code that you quoted before and some of my knowledge. If you can send more codes maybe it can reveal the real problem especially the PHP code that relate with your gallery which located in php extension-ed file, if I may guess perhaps gallery.php, gallerific.php, etc.
gallery.php is: ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bar & Grill</title> <?php include('head.php');?> <LINK rel="stylesheet" type="text/css" href="../css/galleriffic.css"> <script type="text/javascript" src="../js/jquery.galleriffic.js"></script> <script type="text/javascript"> document.write("<style type='text/css'>div.navigation{display:block;}div.content{display:block; text-align:center;}</style>"); </script> </head> <body> <center> <table class="main" align="center" cellpadding="0" cellspacing="0" height="100%"> <tr> <td valign="top" colspan="2"><?php include('header.php');?></td> </tr> <tr> <td valign="top" height="100%"><?php include('nav.php');?></td> <td valign="top" style="padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0" class="content"> <tr> <td valign="top" style="background:url(images/pagehdl.jpg) top center no-repeat; padding:5px;" width="764" align="center"><strong>Photo Gallery</strong></td> </tr> <tr> <td valign="top" align="center"> <div id="thumbs-adv" class="navigation"> <table cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="center"> <ul class="thumbs noscript"> <?php echo $photo_html;?> </ul> </td></tr></table> </div> <center> <div id="controls-adv" class="controls"></div> </center> <div id="gallery-adv" class="content"> <center> <div id="slideshow-adv" class="slideshow"></div> </center> <!-- <div id="loading-adv" class="loader"></div> <div id="caption-adv" class="embox"></div>--> </div> </td> </tr> </table> </td> </tr> </table> <?php include('footer.php');?> <script> var onMouseOutOpacity = 0.67; $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { // Initialize Advanced Galleriffic Gallery var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay: 2000, numThumbs: 10, preloadAhead: 8, enableTopPager: true, enableBottomPager: true, imageContainerSel: '#slideshow-adv', controlsContainerSel: '#controls-adv', captionContainerSel: '#caption-adv', loadingContainerSel: '#loading-adv', renderSSControls: true, renderNavControls: true, playLinkText: 'Play Slideshow', pauseLinkText: 'Pause Slideshow', prevLinkText: '‹ Previous Photo', nextLinkText: 'Next Photo ›', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: true, autoStart: false, onChange: function(prevIndex, nextIndex) { $('#thumbs-adv ul.thumbs').children() .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() .eq(nextIndex).fadeTo('fast', 1.0); }, onTransitionOut: function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn: function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut: function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn: function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); // Initialize Minimal Galleriffic Gallery var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel: '#slideshow-min', controlsContainerSel: '#controls-min' }); }); </script> </center> </body> gallerytest.php seeing any gallerific.php or galleriffic.php) (not: <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Galleriffic | A jQuery plugin for rendering fast-performing photo galleries</title> <link rel="stylesheet" href="../css/basic.css" type="text/css" /> <link rel="stylesheet" href="../css/gallerific.css" type="text/css" /> <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.galleriffic.min.js"></script> <script type="text/javascript"> document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>"); </script> </head> <body> <div id="page"> <div id="container"> <!-- Start Advanced Gallery Html Containers --> <div id="gallery-adv" class="content"> <div id="controls-adv" class="controls"></div> <div id="loading-adv" class="loader"></div> <div id="slideshow-adv" class="slideshow"></div> <div id="caption-adv" class="embox"></div> </div> <div id="thumbs-adv" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0"> <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" /> </a> <div class="caption"> <div class="download"> <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a> </div> <div class="image-title">Title #0</div> <div class="image-desc">Description</div> </div> </li> <li> <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22"> <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" /> </a> <div class="caption"> <div class="download"> <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a> </div> <div class="image-title">Title #22</div> <div class="image-desc">Description</div> </div> </li> <li> <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23"> <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" /> </a> <div class="caption"> <div class="download"> <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a> </div> <div class="image-title">Title #23</div> <div class="image-desc">Description</div> </div> </li> </ul> </div> </div> </div> <script type="text/javascript"> // Initially set opacity on thumbs and add // additional styling for hover effect on thumbs var onMouseOutOpacity = 0.67; $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { // Initialize Advanced Galleriffic Gallery var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay: 2000, numThumbs: 12, preloadAhead: 10, enableTopPager: true, enableBottomPager: true, imageContainerSel: '#slideshow-adv', controlsContainerSel: '#controls-adv', captionContainerSel: '#caption-adv', loadingContainerSel: '#loading-adv', renderSSControls: true, renderNavControls: true, playLinkText: 'Play Slideshow', pauseLinkText: 'Pause Slideshow', prevLinkText: '‹ Previous Photo', nextLinkText: 'Next Photo ›', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: true, autoStart: false, onChange: function(prevIndex, nextIndex) { $('#thumbs-adv ul.thumbs').children() .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() .eq(nextIndex).fadeTo('fast', 1.0); }, onTransitionOut: function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn: function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut: function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn: function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); // Initialize Minimal Galleriffic Gallery var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel: '#slideshow-min', controlsContainerSel: '#controls-min' }); }); </script> </body> </html>
the galleriffic script is: /* * jQuery Galleriffic plugin * * Copyright (c) 2008 Trent Foley * Licensed under the MIT License: * http: // www. opensource. org /licenses /mit-license. php * * Thanks to Taku Sano (Mikage Sawatari), whose history plugin I adapted to work with Galleriffic * Modified by Ghismo (ghismo.com) to disable the location rewrite */ ;(function($) { // Write noscript style document.write("<style type='text/css'>.noscript{display:none}</style>"); var ver = 'galleriffic-1.0'; var galleryOffset = 0; var galleries = []; var allImages = []; var historyCurrentHash; var historyBackStack; var historyForwardStack; var isFirst = false; var dontCheck = false; var isInitialized = false; function getHashFromString(hash) { if (!hash) return -1; hash = hash.replace(/^.*#/, ''); if (isNaN(hash)) return -1; return (+hash); } function getHash() { var hash = location.hash; return getHashFromString(hash); } function registerGallery(gallery) { galleries.push(gallery); // update the global offset value galleryOffset += gallery.data.length; } function getGallery(hash) { for (i = 0; i < galleries.length; i++) { var gallery = galleries; if (hash < (gallery.data.length+gallery.offset)) return gallery; } return 0; } function getIndex(gallery, hash) { return hash-gallery.offset; } function clickHandler(e, gallery, link) { gallery.pause(); if (!gallery.settings.enableHistory) { var hash = getHashFromString(link.href); if (hash >= 0) { var index = getIndex(gallery, hash); if (index >= 0) gallery.goto(index); } e.preventDefault(); } } function historyCallback() { // Using present location.hash always (seems to work, unlike the hash argument passed to this callback) var hash = getHash(); if (hash < 0) return; var gallery = getGallery(hash); if (!gallery) return; var index = hash-gallery.offset; gallery.goto(index); } function historyInit() { if (isInitialized) return; isInitialized = true; var current_hash = location.hash; //(enableHistory) ? location.hash : currentIndexHash; // Ghismo historyCurrentHash = current_hash; if ($.browser.msie) { // To stop the callback firing twice during initilization if no hash present if (historyCurrentHash == '') { historyCurrentHash = '#'; } } else if ($.browser.safari) { // etablish back/forward stacks historyBackStack = []; historyBackStack.length = history.length; historyForwardStack = []; isFirst = true; } setInterval(function() { historyCheck(); }, 100); } function historyAddHistory(hash) { // This makes the looping function do something historyBackStack.push(hash); historyForwardStack.length = 0; // clear forwardStack (true click occured) isFirst = true; } function historyCheck() { if ($.browser.safari) { if (!dontCheck) { var historyDelta = history.length - historyBackStack.length; if (historyDelta) { // back or forward button has been pushed isFirst = false; if (historyDelta < 0) { // back button has been pushed // move items to forward stack for (var i = 0; i < Math.abs(historyDelta); i++) historyForwardStack.unshift(historyBackStack.pop()); } else { // forward button has been pushed // move items to back stack for (var i = 0; i < historyDelta; i++) historyBackStack.push(historyForwardStack.shift()); } var cachedHash = historyBackStack[historyBackStack.length - 1]; if (cachedHash != undefined) { historyCurrentHash = location.hash; // (enableHistory) ? location.hash : currentIndexHash; // Ghismo historyCallback(); } } else if (historyBackStack[historyBackStack.length - 1] == undefined && !isFirst) { historyCallback(); isFirst = true; } } } else { // otherwise, check for location.hash var current_hash = location.hash; // (enableHistory) ? location.hash : currentIndexHash; // Ghismo if(current_hash != historyCurrentHash) { historyCurrentHash = current_hash; historyCallback(); } } } var defaults = { delay: 3000, numThumbs: 20, preloadAhead: 40, // Set to -1 to preload all images enableTopPager: false, enableBottomPager: true, imageContainerSel: '', captionContainerSel: '', controlsContainerSel: '', loadingContainerSel: '', renderSSControls: true, renderNavControls: true, playLinkText: 'Play', pauseLinkText: 'Pause', prevLinkText: 'Previous', nextLinkText: 'Next', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: false, autoStart: false, onChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... } onTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... } onTransitionIn: undefined, // accepts a delegate like such: function() { ... } onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... } onPageTransitionIn: undefined // accepts a delegate like such: function() { ... } }; $.fn.galleriffic = function(thumbsContainerSel, settings) { // Extend Gallery Object $.extend(this, { ver: function() { return ver; }, initializeThumbs: function() { this.data = []; var gallery = this; this.$thumbsContainer.find('ul.thumbs > li').each(function(i) { var $li = $(this); var $aThumb = $li.find('a.thumb'); var hash = gallery.offset+i; gallery.data.push({ title:$aThumb.attr('title'), slideUrl:$aThumb.attr('href'), caption:$li.find('.caption').remove(), hash:hash }); // Setup history $aThumb.attr('rel', 'history'); $aThumb.attr('href', '#'+hash); $aThumb.click(function(e) { clickHandler(e, gallery, this); }); }); return this; }, isPreloadComplete: false, preloadInit: function() { if (this.settings.preloadAhead == 0) return this; this.preloadStartIndex = this.currentIndex; var nextIndex = this.getNextIndex(this.preloadStartIndex); return this.preloadRecursive(this.preloadStartIndex, nextIndex); }, preloadRelocate: function(index) { // By changing this startIndex, the current preload script will restart this.preloadStartIndex = index; return this; }, preloadRecursive: function(startIndex, currentIndex) { // Check if startIndex has been relocated if (startIndex != this.preloadStartIndex) { var nextIndex = this.getNextIndex(this.preloadStartIndex); return this.preloadRecursive(this.preloadStartIndex, nextIndex); } var gallery = this; // Now check for preloadAhead count var preloadCount = currentIndex - startIndex; if (preloadCount < 0) preloadCount = this.data.length-1-startIndex+currentIndex; if (this.settings.preloadAhead >= 0 && preloadCount > this.settings.preloadAhead) { // Do this in order to keep checking for relocated start index setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500); return this; } var imageData = this.data[currentIndex]; if (!imageData) return this; // If already loaded, continue if (imageData.image) return this.preloadNext(startIndex, currentIndex); // Preload the image var image = new Image(); image.onload = function() { imageData.image = this; gallery.preloadNext(startIndex, currentIndex); }; image.alt = imageData.title; image.src = imageData.slideUrl; return this; }, preloadNext: function(startIndex, currentIndex) { var nextIndex = this.getNextIndex(currentIndex); if (nextIndex == startIndex) { this.isPreloadComplete = true; } else { // Use set timeout to free up thread var gallery = this; setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100); } return this; }, getNextIndex: function(index) { var nextIndex = index+1; if (nextIndex >= this.data.length) nextIndex = 0; return nextIndex; }, getPrevIndex: function(index) { var prevIndex = index-1; if (prevIndex < 0) prevIndex = this.data.length-1; return prevIndex; }, pause: function() { if (this.interval) this.toggleSlideshow(); return this; }, play: function() { if (!this.interval) this.toggleSlideshow(); return this; }, toggleSlideshow: function() { if (this.interval) { clearInterval(this.interval); this.interval = 0; if (this.$controlsContainer) { this.$controlsContainer .find('div.ss-controls a').removeClass().addClass('play') .attr('title', this.settings.playLinkText) .attr('href', '#play') .html(this.settings.playLinkText); } } else { this.ssAdvance(); var gallery = this; this.interval = setInterval(function() { gallery.ssAdvance(); }, this.settings.delay); if (this.$controlsContainer) { this.$controlsContainer .find('div.ss-controls a').removeClass().addClass('pause') .attr('title', this.settings.pauseLinkText) .attr('href', '#pause') .html(this.settings.pauseLinkText); } } return this; }, ssAdvance: function() { var nextIndex = this.getNextIndex(this.currentIndex); var nextHash = this.data[nextIndex].hash; // Seems to be working on both FF and Safari if (this.settings.enableHistory) location.href = '#'+nextHash; else this.goto(nextIndex); // IE we need to explicity call goto //if ($.browser.msie) { // this.goto(nextIndex); //} return this; }, goto: function(index) { if (index < 0) index = 0; else if (index >= this.data.length) index = this.data.length-1; if (this.settings.onChange) this.settings.onChange(this.currentIndex, index); this.currentIndex = index; this.preloadRelocate(index); return this.refresh(); }, refresh: function() { var imageData = this.data[this.currentIndex]; if (!imageData) return this; // Flag we are transitioning var isTransitioning = true; var gallery = this; var transitionOutCallback = function() { // Flag that the transition has completed isTransitioning = false; // Update Controls if (gallery.$controlsContainer) { gallery.$controlsContainer .find('div.nav-controls a.prev').attr('href', '#'+gallery.data[gallery.getPrevIndex(gallery.currentIndex)].hash).end() .find('div.nav-controls a.next').attr('href', '#'+gallery.data[gallery.getNextIndex(gallery.currentIndex)].hash); } var imageData = gallery.data[gallery.currentIndex]; // Replace Caption if (gallery.$captionContainer) { gallery.$captionContainer.empty().append(imageData.caption); } if (imageData.image) { gallery.buildImage(imageData.image); } else { // Show loading container if (gallery.$loadingContainer) { gallery.$loadingContainer.show(); } } } if (this.settings.onTransitionOut) { this.settings.onTransitionOut(transitionOutCallback); } else { this.$transitionContainers.hide(); transitionOutCallback(); } if (!imageData.image) { var image = new Image(); // Wire up mainImage onload event image.onload = function() { imageData.image = this; if (!isTransitioning) { gallery.buildImage(imageData.image); } }; // set alt and src image.alt = imageData.title; image.src = imageData.slideUrl; } // This causes the preloader (if still running) to relocate out from the currentIndex this.relocatePreload = true; return this.syncThumbs(); }, buildImage: function(image) { if (this.$imageContainer) { this.$imageContainer.empty(); var gallery = this; var nextIndex = this.getNextIndex(this.currentIndex); // Hide the loading conatiner if (this.$loadingContainer) { this.$loadingContainer.hide(); } // Setup image this.$imageContainer .append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+image.alt+'"></a></span>') .find('a') .append(image) .click(function(e) { clickHandler(e, gallery, this); }); } if (this.settings.onTransitionIn) this.settings.onTransitionIn(); else this.$transitionContainers.show(); return this; }, syncThumbs: function() { if (this.$thumbsContainer) { var page = Math.floor(this.currentIndex / this.settings.numThumbs); if (page != this.currentPage) { this.currentPage = page; this.updateThumbs(); } // Remove existing selected class and add selected class to new thumb var $thumbs = this.$thumbsContainer.find('ul.thumbs').children(); $thumbs.filter('.selected').removeClass('selected'); $thumbs.eq(this.currentIndex).addClass('selected'); } return this; }, updateThumbs: function() { var gallery = this; var transitionOutCallback = function() { gallery.rebuildThumbs(); // Transition In the thumbsContainer if (gallery.settings.onPageTransitionIn) gallery.settings.onPageTransitionIn(); else gallery.$thumbsContainer.show(); }; // Transition Out the thumbsContainer if (this.settings.onPageTransitionOut) { this.settings.onPageTransitionOut(transitionOutCallback); } else { this.$thumbsContainer.hide(); transitionOutCallback(); } return this; }, rebuildThumbs: function() { // Initialize currentPage to first page if (this.currentPage < 0) this.currentPage = 0; var needsPagination = this.data.length > this.settings.numThumbs; // Rebuild top pager var $topPager = this.$thumbsContainer.find('div.top'); if ($topPager.length == 0) $topPager = this.$thumbsContainer.prepend('<div class="top pagination"></div>').find('div.top'); if (needsPagination && this.settings.enableTopPager) { $topPager.empty(); this.buildPager($topPager); } // Rebuild bottom pager if (needsPagination && this.settings.enableBottomPager) { var $bottomPager = this.$thumbsContainer.find('div.bottom'); if ($bottomPager.length == 0) $bottomPager = this.$thumbsContainer.append('<div class="bottom pagination"></div>').find('div.bottom'); else $bottomPager.empty(); this.buildPager($bottomPager); } var startIndex = this.currentPage*this.settings.numThumbs; var stopIndex = startIndex+this.settings.numThumbs-1; if (stopIndex >= this.data.length) stopIndex = this.data.length-1; // Show/Hide thumbs var $thumbsUl = this.$thumbsContainer.find('ul.thumbs'); $thumbsUl.find('li').each(function(i) { var $li = $(this); if (i >= startIndex && i <= stopIndex) { $li.show(); } else { $li.hide(); } }); // Remove the noscript class from the thumbs container ul $thumbsUl.removeClass('noscript'); return this; }, buildPager: function(pager) { var gallery = this; var startIndex = this.currentPage*this.settings.numThumbs; // Prev Page Link if (this.currentPage > 0) { var prevPage = startIndex - this.settings.numThumbs; pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.settings.prevPageLinkText+'">'+this.settings.prevPageLinkText+'</a>'); } // Page Index Links for (i=this.currentPage-3; i<=this.currentPage+3; i++) { var pageNum = i+1; if (i == this.currentPage) pager.append('<span class="current">'+pageNum+'</span>'); else if (i>=0 && i<this.numPages) { var imageIndex = i*this.settings.numThumbs; pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageNum+'">'+pageNum+'</a>'); } } // Next Page Link var nextPage = startIndex+this.settings.numThumbs; if (nextPage < this.data.length) { pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.settings.nextPageLinkText+'">'+this.settings.nextPageLinkText+'</a>'); } pager.find('a').click(function(e) { clickHandler(e, gallery, this); }); return this; } }); // Now initialize the gallery this.settings = $.extend({}, defaults, settings); //enableHistory = this.settings.enableHistory; // Ghismo if (this.interval) clearInterval(this.interval); this.interval = 0; if (this.settings.imageContainerSel) this.$imageContainer = $(this.settings.imageContainerSel); if (this.settings.captionContainerSel) this.$captionContainer = $(this.settings.captionContainerSel); if (this.settings.loadingContainerSel) this.$loadingContainer = $(this.settings.loadingContainerSel); // Setup the jQuery object holding each container that will be transitioned this.$transitionContainers = $([]); if (this.$imageContainer) this.$transitionContainers = this.$transitionContainers.add(this.$imageContainer); if (this.$captionContainer) this.$transitionContainers = this.$transitionContainers.add(this.$captionContainer); // Set the hash index offset for this gallery this.offset = galleryOffset; this.$thumbsContainer = $(thumbsContainerSel); this.initializeThumbs(); // Add this gallery to the global galleries array registerGallery(this); this.numPages = Math.ceil(this.data.length/this.settings.numThumbs); this.currentPage = -1; this.currentIndex = 0; var gallery = this; // Hide the loadingContainer if (this.$loadingContainer) this.$loadingContainer.hide(); // Setup controls if (this.settings.controlsContainerSel) { this.$controlsContainer = $(this.settings.controlsContainerSel).empty(); if (this.settings.renderSSControls) { if (this.settings.autoStart) { this.$controlsContainer .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.settings.pauseLinkText+'">'+this.settings.pauseLinkText+'</a></div>'); } else { this.$controlsContainer .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.settings.playLinkText+'">'+this.settings.playLinkText+'</a></div>'); } this.$controlsContainer.find('div.ss-controls a') .click(function(e) { gallery.toggleSlideshow(); e.preventDefault(); return false; }); } if (this.settings.renderNavControls) { var $navControls = this.$controlsContainer .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.settings.prevLinkText+'">'+this.settings.prevLinkText+'</a><a class="next" rel="history" title="'+this.settings.nextLinkText+'">'+this.settings.nextLinkText+'</a></div>') .find('div.nav-controls a') .click(function(e) { clickHandler(e, gallery, this); }); } } // Initialize history only once when the first gallery on the page is initialized historyInit(); // Build image var hash = getHash(); var hashGallery = (hash >= 0) ? getGallery(hash) : 0; var gotoIndex = (hashGallery && this == hashGallery) ? (hash-this.offset) : 0; this.goto(gotoIndex); if (this.settings.autoStart) { setTimeout(function() { gallery.play(); }, this.settings.delay); } // Kickoff Image Preloader after 1 second setTimeout(function() { gallery.preloadInit(); }, 1000); return this; }; })(jQuery);
Ok now the first script is seemed exactly the same with the you quoted before. The second script is similar and it might be used by your web developer to test the gallerific, that explained where the name gallerytest.php came for. The last script is gallerific which relate on how your gallery will be presented interactively but it doesn't have something to do with image update. I'm getting curious with this case and let's finalize it. I think we are on the right track. I'm suspicious with the header.php script which could have something. You can send me via pm as well if you want. And it almost midnight in my time zone but I will wake up again in a few hours to start my fasting day. I can reply at that time.