Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Verfasst: Di 6. Jul 2010, 09:50
bei mir erscheint jetzt die 6. kann mir jemand sagen, woher die zahl kommt???
Das Diskussionsforum zum Open Source Content Management System
https://forum.contenido.org/
Code: Alles auswählen
echo $numOfThumbs;
Nakoda hat geschrieben: Bei der Einstellung zentriert sind Hochkant Bilder trozdem links ausgerichtet. Kann man das auch irgendwie hin bekommen das die dann in der Mitte erscheinen?
EDIT: Auch scheint es bei mir Probleme mit den Thumbs zu geben.
ich habe eingestellt das acht Thumbs in vier Spalten dargestellt werden sollen.
Das ist aber leider mitnichten der Fall.
http://www.basecore-hh.de/front_content.php?idart=344
Die PHP Funktion bcmath fehlt und muss auf dem Server installiert werden.Fatal error: Call to undefined function bcsub() in /srv/www/vhosts/xxxxxxx/httpdocs/contenido/includes/include.tplcfg_edit_form.php(404) : eval()'d code on line 271
Code: Alles auswählen
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : Galleriffic
* Author : Andreas Dinkelacker
* Copyright : Andreas Dinkelacker
* Created : 23.07.2009
* Version : 0.3.4 BETA
* License : GNU/GPLv2 only (http://www.gnu.org/licenses/gpl-2.0.html#TOC1)
************************************************/
$value0="CMS_VALUE[0]"; //Bilder pro Seite
$value1="CMS_VALUE[1]"; // Breite der Galerie
$value2="CMS_VALUE[2]"; // Bildgroesse
$value3="CMS_VALUE[3]"; // Thumbgroesse
$value4="CMS_VALUE[4]"; // Ordner
$value5="CMS_VALUE[5]"; // eigene Image Groesse
$value6="CMS_VALUE[6]"; // eigene Image Breite
$value7="CMS_VALUE[7]"; // eigene Image Hoehe
$value8="CMS_VALUE[8]"; // eigene Thumb Groesse
$value9="CMS_VALUE[9]"; // eigene Thumb Breite
$value10="CMS_VALUE[10]"; // eigene Thumb Hoehe
$value11="CMS_VALUE[11]"; // Sichtbarkeit inaktiver Bilder
$value12="CMS_VALUE[12]"; // Caching
$value15="CMS_VALUE[15]"; // delete original file after resizing
$value16="CMS_VALUE[16]"; // Anzahl Spalten
$value17="CMS_VALUE[17]"; // Anordnung Navigation und Bild
$value18="CMS_VALUE[18]"; // Ausrichtung der Anzeige
$value19="CMS_VALUE[19]"; // Position Steuerelemente
$value20="CMS_VALUE[20]"; // Position Anzeige
$value21="CMS_VALUE[21]"; // Position Bild-Infobox
$value22="CMS_VALUE[22]"; // Quadratische Thumbs (Seitenverhaeltnis anpassen)
if ($value22!="true") $value22="false";
// Check if mod_rewrite may be active
if (substr_count($_SERVER[REQUEST_URI],"front_content.php")==0) {
$modRewrite=1;
$modRewriteFiller="?";
$phpSelf=str_replace("?".$_SERVER[QUERY_STRING],"",$_SERVER[REQUEST_URI]);
} else {
$modRewrite=0;
$modRewriteFiller="&";
$idcat=strip_tags($_GET[idcat]);
$idart=strip_tags($_GET[idart]);
$idcatart=strip_tags($_GET[idcatart]);
if ($idcat!="" && $idcat!=0) {
$artCat='idcat='.$idcat;
} elseif ($idart!="" && $idart!=0) {
$artCat='idart='.$idart;
} elseif ($idcatart!="" && $idcatart!=0) {
$artCat='idcatart='.$idcatart;
}
$phpSelf=$_SERVER[PHP_SELF].'?'.$artCat;
}
if ($_GET[filename]!="") {
$fileName=strip_tags($_GET[filename]);
$absPath=$cfgClient[$client]['upload'].$value4.$filename;
$fileSize=@filesize($absPath);
header("Content-type: ".getMime($absPath));
header("Content-Length: ".$fileSize);
header("Content-Disposition: attachment; filename=\"".$fileName."\"");
ob_clean();
flush();
readfile($absPath);
exit();
}
cInclude('classes', 'class.template.php');
$tpl = new Template;
$tpl->reset();
if ($value5!=1) {
$iSize=explode("x",$value2);
// Image height */
$iHeight=$iSize[1];
// Image width
$iWidth=$iSize[0];
} else {
// Image height
$iHeight=$value7;
// Image width
$iWidth=$value6;
}
if ($value8!=1) {
$tSize=explode("x",$value3);
// Thumb height
$tHeight=$tSize[1];
// Thumb width
$tWidth=$tSize[0];
} else {
// Thumb height
$tHeight=$value10;
// Thumb width
$tWidth=$value9;
}
// Set standard width which is set in the site properties.
// Necessary if there is an image which is bigger than this values
// (makes problems on resizing)
$iWidthSettings=$iWidth;
$tWidthSettings=$tWidth;
if ($value16=="A") {
// first calculate image size and thumb sizes to get the correct value
$restWidth=round($value1-$iWidthSettings-10,0);
$numOfThumbs=round($restWidth/($tWidthSettings+6),0);
} elseif ($value16>0) $numOfThumbs=$value16;
elseif ($value16==0) $numOfThumbs=$value0;
$naviWidth=round(($tWidthSettings*$numOfThumbs)+($numOfThumbs*17),0);
/*
The following variables will build the content of the gallery.
The divs must be separated to ensure more layout configuration.
*/
$contentDivStart='<div id="gallery-adv" class="gal_content"><div id="loading-adv" class="loader"></div>';
$contentControlsAdv='<div id="controls-adv" class="controls"></div>';
$contentSlideshowAdv='<div id="slideshow-adv" class="slideshow"></div>';
$contentCaptionAdv='<div id="caption-adv" class="embox"></div>';
$contentDivEnd='</div>';
$checkArr=array();
$allnones=0;
if (!in_array($value19,$checkArr)) if ($value19=="none") $allnones+=1; else array_push($checkArr,$value19);
if (!in_array($value20,$checkArr)) if ($value20=="none") $allnones+=1; else array_push($checkArr,$value20);
if (!in_array($value21,$checkArr)) if ($value21=="none") $allnones+=1; else array_push($checkArr,$value21);
if (sizeof($checkArr)<bcsub(3,$allnones)) $contentDivs=$contentDivStart.$contentControlsAdv.$contentLoadingAdv.$contentSlideshowAdv.$contentCaptionAdv.$contentDivEnd;
else {
$contentDivs=$contentDivStart;
if ($value19=="top") $contentDivs.=$contentControlsAdv;
elseif ($value20=="top") $contentDivs.=$contentSlideshowAdv;
elseif ($value21=="top") $contentDivs.=$contentCaptionAdv;
if ($value19=="middle") $contentDivs.=$contentControlsAdv;
elseif ($value20=="middle") $contentDivs.=$contentSlideshowAdv;
elseif ($value21=="middle") $contentDivs.=$contentCaptionAdv;
if ($value19=="bottom") $contentDivs.=$contentControlsAdv;
elseif ($value20=="bottom") $contentDivs.=$contentSlideshowAdv;
elseif ($value21=="bottom") $contentDivs.=$contentCaptionAdv;
}
/*
Define the alignment of the elements
*/
if ($value17=="lr") {
$naviPos='float:left;position:absolute;';
$contentPos='float:right;';
$galleryAlign='width:'.$value1.'px;position:relative;';
$tpl->set('s','CONTENTTOP',$contentDivs);
$tpl->set('s','CONTENTBOTTOM','');
} elseif ($value17=="rl") {
$naviPos='float:right;position:absolute;margin-left:'.bcadd($iWidth,20,0).'px;';
$contentPos='float:left;';
$galleryAlign='width:'.round($iWidth+10,0).'px;position:relative;';
$tpl->set('s','CONTENTTOP',$contentDivs);
$tpl->set('s','CONTENTBOTTOM','');
} elseif ($value17=="ou") {
$naviPos="width:".$value1."px";
$contentPos="";
$tpl->set('s','CONTENTBOTTOM','<br clear="all"/>'.$contentDivs);
$tpl->set('s','CONTENTTOP','');
$galleryAlign='width:'.round($iWidth+10,0).'px;position:relative;';
$numOfThumbs=substr(round($value1/($tWidth+6),2),0,-3);
echo $numOfThumbs;
} elseif ($value17=="uo") {
$naviPos="width:".$value1."px";
$contentPos="";
$tpl->set('s','CONTENTTOP',$contentDivs);
$tpl->set('s','CONTENTBOTTOM','');
$galleryAlign='width:'.round($iWidth+10,0).'px;position:relative;';
$numOfThumbs=substr(round($value1/($tWidth+6),2),0,-3);
}
if ($value18=="l") {
$galleryAlign.="left:0px;";
} elseif ($value18=="r") {
$galleryAlign.="right:0px;";
} elseif ($value18=="c") {
if ($value17=="uo" || $value17=="ou") {
if ($iWidth>$naviWidth) $thisWidth=round($iWidth+30,0);
else $thisWidth=$naviWidth;
} else $thisWidth=round($iWidth+$naviWidth+30,0);
$galleryAlign='width:'.$thisWidth.'px;position:relative;';
$galleryAlign.="left:50%;margin-left:-".round($thisWidth/2,0)."px;";
}
// Read the images
$fContent=scandir($cfgClient[$client]['upload'].$value4);
$countFiles=0;
foreach ($fContent as $key => $file) {
if (is_file($cfgClient[$client]['upload'].$value4.$file)) {
$fileId=mysql_fetch_assoc(mysql_query("SELECT * FROM ".$cfg[tab][upl]." WHERE filename='".$file."'"));
$fileId=$fileId[idupl];
$fileMeta=mysql_fetch_assoc(mysql_query("SELECT * FROM ".$cfg[tab][upl_meta]." WHERE idupl='".$fileId."'"));
if ($fileMeta[medianame]!="") $medianame=urldecode($fileMeta[medianame]);
else $medianame=$file;
if ($fileMeta[description]!="") $description=urldecode($fileMeta[description]);
else $description="";
$tpl->set('d', 'HREFORIGINAL', $phpSelf.$modRewriteFiller.'filename='.$file);
// Scale image to thumb size and to smaller size
// the next lines are necessary, that if the original file was
// replaced, the file now is resized again
$iWidth=$iWidthSettings;
$scaledThumb=cApiImgScale($cfgClient[$client]['upload'].$value4.$file, $tWidth, $tHeight, false, false, $value12);
// right here the decision is made, whether the thumbs should be quadratic
// or resized within keeping the aspect ratio
if ($value22=="true") {
$scaledThumb=str_replace($cfgClient[$client]['path']['htmlpath'],"",$scaledThumb);
$scaledThumbSize=@getimagesize($scaledThumb);
if ($scaledThumbSize[0]>$scaledThumbSize[1]) {$tmpHeight=$scaledThumbSize[1];$tmpWidth=$scaledThumbSize[1];}
else {$tmpWidth=$scaledThumbSize[0];$tmpHeight=$scaledThumbSize[0];}
$scaledThumb=cApiImgScale($scaledThumb, $tmpWidth, $tmpHeight, true, false, $value12);
}
$scaledImage=cApiImgScale($cfgClient[$client]['upload'].$value4.$file, $iWidth, $iHeight, false, false, $value12);
if ($value15==1) {
$scaledImage=strrchr($scaledImage,"/");
if (unlink($cfgClient[$client]['upload'].$value4.$file) && copy($cfgClient[$client]["path"]["frontend"]."cache".$scaledImage, $cfgClient[$client]["upl"]["path"].$value4.$file)) {
@unlink($cfgClient[$client]["path"]["frontend"]."cache".$scaledImage);
chmod($cfgClient[$client]["upl"]["path"].$value4.$file,0757);
$scaledImage=$cfgClient[$client]["htmlpath"]["frontend"].$cfgClient[$client]['upload'].$value4.$file;
}
}
$imgSize=getimagesize(str_replace($cfgClient[$client]["path"]["htmlpath"], $cfgClient[$client]["path"]["frontend"], $scaledImage));
if ($imgSize[0]<$iWidth) $iWidth=$imgSize[0];
$file=str_replace("/","",strrchr($scaledImage,"/"));
$tpl->set('d', 'HREFTHUMB', $scaledThumb);
$tpl->set('d', 'HREFRESIZE', $scaledImage);
$tpl->set('d', 'TITLE', $medianame);
$tpl->set('d', 'DOWNLOADORIGINAL', mi18n("Download"));
$tpl->set('d', 'DESCRIPTION', $description);
$tpl->set('s', 'NAVIWIDTH', $naviWidth);
$tpl->set('s', 'CONTENTPOS', $contentPos);
$tpl->set('s', 'CLOSEDIV', $contentDivEnd);
$tpl->set('s', 'NAVIPOS', $naviPos);
$tpl->set('s', 'GALLERYSETTINGS', $galleryAlign);
//$tpl->set('s', 'CONTENTWIDTH', round($iWidth+$naviWidth+50,0).'px');
$tpl->set('s', 'CONTENTWIDTH', $value1.'px');
$tpl->set('s', 'CONTROLWIDTH', $value1.'px');
if (round($countFiles+1,0)%$numOfThumbs==0 && $countFiles>0 && $countFiles<sizeof($fContent)) $tpl->set('d','MAKENEWLINE','<br clear="all"/>');
else $tpl->set('d','MAKENEWLINE','');
$tpl->next();
$countFiles++;
}
}
$tpl->generate('templates/galleriffic.html');
// finally set the images per site to all images if CMS_VALUE[0] is set to 0
if ($value0==0) $value0=$countFiles;
function getMime($filename) {
$mime_types = array(
// images
'png' => 'image/png',
'jpe' => 'image/jpeg',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'gif' => 'image/gif',
'bmp' => 'image/bmp',
'ico' => 'image/vnd.microsoft.icon',
'tiff' => 'image/tiff',
'tif' => 'image/tiff',
'svg' => 'image/svg+xml',
'svgz' => 'image/svg+xml'
);
$ext = strtolower(array_pop(explode('.',$filename)));
return $mime_types[$ext];
}
?>
<script type="text/javascript">
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = <?php echo $value11; ?>;
$('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 5.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: <?php echo $value0; ?>,
preloadAhead: <?php echo $value0; ?>,
enableTopPager: true,
enableBottomPager: true,
imageContainerSel: '#slideshow-adv',
controlsContainerSel: '#controls-adv',
captionContainerSel: '#caption-adv',
loadingContainerSel: '#loading-adv',
renderSSControls: true,
renderNavControls: true,
playLinkText: '<?php echo mi18n("Slideshow starten");?>',
pauseLinkText: '<?php echo mi18n("Slideshow anhalten");?>',
prevLinkText: '‹ <?php echo mi18n("Vorheriges Bild");?>',
nextLinkText: '<?php echo mi18n("Nächstes Bild");?> ›',
nextPageLinkText: '›',
prevPageLinkText: '‹',
lastPageLinkText: '»',
firstPageLinkText: '«',
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');
}
});
});
</script>
Code: Alles auswählen
/*
* jQuery Galleriffic plugin
*
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
* 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 getHref() {
var href = location.href;
href = href.replace(/#.*$/, '');
return href;
}
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[i];
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', getHref()+'#'+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', getHref()+'#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', getHref()+'#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 = getHref()+'#'+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', getHref()+'#'+gallery.data[gallery.getPrevIndex(gallery.currentIndex)].hash).end()
.find('div.nav-controls a.next').attr('href', getHref()+'#'+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="'+getHref()+'#'+this.data[this.getNextIndex(this.currentIndex)].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) {
pager.append('<a rel="history" href="'+getHref()+'#0" title="'+this.settings.firstPageLinkText+'">'+this.settings.firstPageLinkText+'</a>');
var prevPage = startIndex - this.settings.numThumbs;
pager.append('<a rel="history" href="'+getHref()+'#'+this.data[prevPage].hash+'" title="'+this.settings.prevPageLinkText+'">'+this.settings.prevPageLinkText+'</a>');
}
// Page Index Links
for (i=this.currentPage-4; i<=this.currentPage+4; 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="'+getHref()+'#'+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="'+getHref()+'#'+this.data[nextPage].hash+'" title="'+this.settings.nextPageLinkText+'">'+this.settings.nextPageLinkText+'</a>');
var allPages = (this.data.length-1)/this.settings.numThumbs;
var lastPage = allPages*this.settings.numThumbs;
pager.append('<a rel="history" href="'+getHref()+'#'+lastPage+'" title="'+this.settings.lastPageLinkText+'">'+this.settings.lastPageLinkText+'</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="'+getHref()+'#pause" class="pause" title="'+this.settings.pauseLinkText+'">'+this.settings.pauseLinkText+'</a></div>');
} else {
this.$controlsContainer
.append('<div class="ss-controls"><a href="'+getHref()+'#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);
Ähmm, das hört sich nach einer Jobanfrage an. Möchtest du das ich den Part hier abtrenne und ins Job-Forum verschiebe?lunsen_de hat geschrieben:Hallo, ich habe das Problem, dass sich ein Kunde über die Qualität der großen Bilder beschwert bzw. warum nicght die Originale angezeigt werden.