Modul: Galleriffic (Bildergalerie mit jQuery)
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
bei mir erscheint jetzt die 6. kann mir jemand sagen, woher die zahl kommt???
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Moin allerseits,
hab auch diese Ausgabe mit der Zahl vorneweg.
http://www.basecore-hh.de/front_content.php?idart=347
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
Erledigt IE hatte 'nen Haken: Außerdem werden die Seitenzahlen nicht korrekt angezeigt. Im obigen Fall überspringt er von Seite eins auf zwei, zwei Kästchen.
Hab ich was falsch eingestellt?
hab auch diese Ausgabe mit der Zahl vorneweg.
http://www.basecore-hh.de/front_content.php?idart=347
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
Erledigt IE hatte 'nen Haken: Außerdem werden die Seitenzahlen nicht korrekt angezeigt. Im obigen Fall überspringt er von Seite eins auf zwei, zwei Kästchen.
Hab ich was falsch eingestellt?
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Ich glaube ich hab gefunden, warum die Zahl angezeigt wird.
Bitte im Modulcode-Output die Zeile 171 löschen, bzw. nach folgendem String suchen:
Werde ich in einer kommenden Version berücksichtigen.
Bitte im Modulcode-Output die Zeile 171 löschen, bzw. nach folgendem String suchen:
Code: Alles auswählen
echo $numOfThumbs;
selbstentwickelte Module:
Downloads und Infos zu den Modulen: gibt es hier.
Modul: Forum | Version 0.9 | getestet: 4.6.24 MR, 4.8.11, 4.8.11 AMR
Modul: Galleriffic | Version: 0.3.4 BETA | getestet: 4.8.11, 4.8.11 AMR, 4.8.12, 4.8.12 AMR
Modul: Metadata | Version: 2.0 | getestet: 4.9.7, 4.9.7 AMR
Modul: Slider Gallery | Version: 1.0 | getestet: 4.9.12 AMR
Modul: Up- & Download | Version: 4.1 | getestet: 4.9.12 AMR
Downloads und Infos zu den Modulen: gibt es hier.
Modul: Forum | Version 0.9 | getestet: 4.6.24 MR, 4.8.11, 4.8.11 AMR
Modul: Galleriffic | Version: 0.3.4 BETA | getestet: 4.8.11, 4.8.11 AMR, 4.8.12, 4.8.12 AMR
Modul: Metadata | Version: 2.0 | getestet: 4.9.7, 4.9.7 AMR
Modul: Slider Gallery | Version: 1.0 | getestet: 4.9.12 AMR
Modul: Up- & Download | Version: 4.1 | getestet: 4.9.12 AMR
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Moin,
jubb. Das war es. Dankeschön.
jubb. Das war es. Dankeschön.
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Muss leider noch einmal nerven.
Hast du für diese beiden Sachen auch noch einen Tipp?
Hast du für diese beiden Sachen auch noch einen Tipp?
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
-
- Beiträge: 298
- Registriert: Di 16. Nov 2004, 15:43
- Wohnort: Arnstadt / Thüringen
- Kontaktdaten:
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Kleiner Hinweis...
das Tag {MAKENEWLINE} erzeugt innerhalb der Liste ein <br>... dieses <br> führt dazu, dass wenn man sich auf Seite 2 befindet und das letzte Element anklickt, das vorletzte Elemente selektiert wird. Bin mir auch nicht sicher, ob ein <br> überhaupt in einer Liste (<ul>) stehen darf.
Christian
das Tag {MAKENEWLINE} erzeugt innerhalb der Liste ein <br>... dieses <br> führt dazu, dass wenn man sich auf Seite 2 befindet und das letzte Element anklickt, das vorletzte Elemente selektiert wird. Bin mir auch nicht sicher, ob ein <br> überhaupt in einer Liste (<ul>) stehen darf.
Christian
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
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
( compile php --with-bcmath)
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
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.
Warum werden die Bilder nochmals in den Cache Ordner erstellt, wenn sie NICHT GRÖSSER oder GENAUSO GROSS sind wie die eingestellten Werte.
Er hat eingestellt in der Konfig 400px x 300px und hat auch die Bilder genau in dieser Größer hochgeladen. Trotzdem führt kommt im Frontend das Große Bild aus dem Cache-Ordner (cms/cache/848251e0699629dec2135edf8531549b.jpg).
Was muss man im Modulcode (oder der js) anpassen, dass nur Bilder neu berechnet werden, die größer als die eingestellten Werte sind.
Hier der Modul-Output:
Hier die jquery.galleriffic.js:
Ich hoffe auf Hilfe, da meine PHP-Kenntnisse dafür noch nicht ausreichen.
Gruß lunsen_de
Warum werden die Bilder nochmals in den Cache Ordner erstellt, wenn sie NICHT GRÖSSER oder GENAUSO GROSS sind wie die eingestellten Werte.
Er hat eingestellt in der Konfig 400px x 300px und hat auch die Bilder genau in dieser Größer hochgeladen. Trotzdem führt kommt im Frontend das Große Bild aus dem Cache-Ordner (cms/cache/848251e0699629dec2135edf8531549b.jpg).
Was muss man im Modulcode (oder der js) anpassen, dass nur Bilder neu berechnet werden, die größer als die eingestellten Werte sind.
Hier der Modul-Output:
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);
Gruß lunsen_de
-
- Beiträge: 4255
- Registriert: Do 30. Jun 2005, 22:56
- Wohnort: Eltmann, Unterfranken, Bayern
- Kontaktdaten:
Re: Modul: Galleriffic (Bildergalerie mit 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.
Gruß aus Franken
Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Hallo, eigentlich hielt ich das nicht für einen Job, da es beim Modul sicher allgemein gut wäre, wenn nur Bilder neu berechnet werden, bei denen das Original größer als die eingestellten Werte sind. Den Qualilitätsverlust eines Bildes, dass von den Abmessungen genauso groß ist wie das Original, könnte man sich doch eigentlich sparen.
(Wenn sich dazu allerdings in den nächsten Tagen keine Lösung/Ansatz findet, wäre das mit dem Job eine Notlösung.)
Gruß lunsen_de
(Wenn sich dazu allerdings in den nächsten Tagen keine Lösung/Ansatz findet, wäre das mit dem Job eine Notlösung.)
Gruß lunsen_de
-
- Beiträge: 4255
- Registriert: Do 30. Jun 2005, 22:56
- Wohnort: Eltmann, Unterfranken, Bayern
- Kontaktdaten:
Re: Modul: Galleriffic (Bildergalerie mit jQuery)
Hmm, ok, dazu verkneif ich mir mal lieber eine weitere Kommentierung und stell den Zaunpfahl wieder weg.
Solltest du auf die "Notlösung" zurückgreifen wollen dann gib mir ne kurze Info und ich verschieb das hier.
Gruß aus Franken
Ortwin
Solltest du auf die "Notlösung" zurückgreifen wollen dann gib mir ne kurze Info und ich verschieb das hier.
Gruß aus Franken
Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog