Modul: Galleriffic (Bildergalerie mit jQuery)

[Dinkel]

Versuch mal bitte den folgenden Code im Output.

HINWEIS: Das ist kein offizieller Code, es gibt dort bereits ungetestete Modifizierungen für die nächste Version!

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname  :      Galleriffic
* Author     :      Andreas Dinkelacker
* Copyright  :      Andreas Dinkelacker
* Created    :      
* Version    :      
* 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', $iWidth.'px');
        $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:           '&lsaquo; <?php echo mi18n("Vorheriges Bild");?>',
                    nextLinkText:           '<?php echo mi18n("N&auml;chstes Bild");?> &rsaquo;',
                    nextPageLinkText:       '&rsaquo;',
                    prevPageLinkText:       '&lsaquo;',
                    lastPageLinkText:       '&raquo;',
                    firstPageLinkText:      '&laquo;',
                    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>

[PhoeniXaC]

Hi,

hat leider nix geändert - wir vermuten den Fehler ünrigens hier:

Code: Alles auswählen

 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);

Die Thumbs werden (besonders die hochformatigen) nicht auf die Größe aus der Konfiguration skaliert, sondern orientieren sich vorher an den Seitenverhältnissen der jeweiligen Bilder.
D.h. es wird die Länge genommen und auf die Thumbbreite angepasst.Die Höhe macht dann, was sie will...

Ist es möglich, dass da die ausgelesenen Werte nicht ganz richtg weiterverwertet werden?

[Dinkel]

Also CMS_VALUE[22] (fka $value22) ist die Einstellung, dass quadratische Thumbs generiert werden. Das ist nicht Dein Problem, oder? Ich dachte, dass Du das Problem nur dann hast, wenn das erst Bild in der Liste hochkant ist (und hochkant != quadratisch).

[PhoeniXaC]

Sorry,

hier gehts etwas drunter und drüber.
Dieses kuriose Problem exisiert höchstwahrscheinlich weiterhin, allerdings sind wir der Zeit halber von deisem Vorhaben abgewichen.

In meinem letzten Post hatte ich ein weiteres Problem genannt. Die Quadrate werden leider nicht alle auf die gleiche Größe gesetzt. Das haben wir mittlwerweile in den Modultemplates erzwungen.

Das aktuelle Ergebniss kann nun hier eingesehen werden:
http://www.igk-chemnitz.de/galerie

[Nakoda]

Sorry,
In meinem letzten Post hatte ich ein weiteres Problem genannt. Die Quadrate werden leider nicht alle auf die gleiche Größe gesetzt. Das haben wir mittlwerweile in den Modultemplates erzwungen.

Hi zusammen,

teilt Ihr Euer Wissen mit uns?
Ich persönlich hab nämlich das gleiche Prob auf meiner Seite und ich find einfach nicht raus wie es funkt.

[Mirco NAJU]

rein vom Gefühl her ... bisher noch nicht aktiv im direkten Umfeld getestet

<img src="{HREFTHUMB}" alt="{TITLE}" width="120" height="120" />

einfach im Modultemplate fest definieren und dann das erstelle skallieren lassen

könnte hinhauen ... muss aber nicht ... wäre aber einen Versuch wert

EDIT:
ich hab's jetzt doch selbst auch mal testweise in die testumgebung eingepflegt ... und kann dir sagen, dass dies wahrscheinlich die Lösung deines Problems sein dürfte, da es auch bei mir fehlerfrei funktioniert ... es geht halt nur ein bisschen die Flexibilität verloren

ich hätt im Gegenzug aber auch noch eine Frage zur Showfunktion ... wo stelle ich denn dort die Anzeigedauer des Bildes ein? ... das was derzeit eingepflegt ist, ist ein wenig zu kurz für unsere Bedürfnisse

[Nakoda]

Juhu! Ich kann auch mal helfen.
Da gibt es folgende Zeilen im Output:

Code: Alles auswählen

                // Initialize Advanced Galleriffic Gallery
                var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', {
                    delay:                  2000,

Hier kann man dann seine Wunschzeit in Milisekunden einstellen!

[surfinmoe]

Hallo an Alle,

ich bin neu hier, konnte zu meinem Problem leider nirgends Infos finden. Ist ein sehr schönes Modul und lief im Firefox auch gleich auf anhieb einwandfrei. Im IE6 und IE7 wurde die Thumbnail-Anzeige allerdings umf 506px nach rechts verschoben. Hab alles durchgeguckt und rumprobiert, kann aber die Ursache nicht ausmachen. Dann habe ich testweise den neuen Code für den Output eingebaut und siehe da im IE6 wird alles optimal dargestellt, im IE7 allerdings alles beim alten!

Ich verstehe absolut nicht woher das kommt da ich alle unnötigen Breitenangaben etc. aus der CSS-Datei entfernt habe.

Wäre super wenn sich das mal jemand angucken könnte- ich bin echt am verzweifeln...
http://www.zooma09.com/cms/front_content.php?idcat=40#5


Gruß

Surfinmoe

[drive]

Hallo surfinmoe,

besser wäre es, die beiden Elemente (Großbildanzeige und Thumbnaildarstellung) nebeneinander zu floaten, ohne absoluter Positionierung und ohne Margin.
Versuch aber trotzdem erst einmal für den IE das Margin-links herauszunehmen bei deiner Klasse .gal_navigation.

Das müsste irgendwo in dem Modul wiederzufinden sein.
Folgenden Bereich im Quellcode mein ich:

Code: Alles auswählen

<script type="text/javascript">
    document.write("<style type='text/css'>div.gal_navigation{width:411px;float:right;position:absolute;margin-left:570px;}div.slideshow{float:left;}div.gal_content{width:px;}div#controls-adv{width:550px;}</style>");
</script>

Dort am besten einfach mal das margin rauslöschen.

Gruß drive

[idea-tec]

das wird dynamisch im modul-output erzeugt!!!

[Nakoda]

Nabend allerseits,

ich würd gerne in meiner Navigation nur die Slideshow drin stehen haben und die anderen beiden nicht.
Find aber irgendwie nicht die richtige Stelle die ich dazu auskommentieren muss.
Habt Ihr 'nen Tipp für mich?

[drive]

Hi Nakoda, du musst in der Modulausgabe 3 Zeilen bearbeiten:

(Meine Angaben beziehen sich auf das "Galleriffic 0.3.3 BETA" Modul)

Zeile: 156 in

Code: Alles auswählen

    $naviPos='display:none;';

Zeile: 162 in

Code: Alles auswählen

    $naviPos='display:none;position:absolute;margin-left:'.bcadd($iWidth,20,0).'px;';

Zeile: 354 in

Code: Alles auswählen

                    autoStart:              true,

Gruß drive

[Nakoda]

Hi drive,

das war es leider nicht guckst Du hier!
Wollte nicht das die Slideshow startet sondern das das "vorher", "nachher" nicht da ist.

[idea-tec]

so ganz sicher bin ich mir nicht, habs nicht getestet, aber folgendes:

Zeile 123: $contentControlsAdv='<div id="controls-adv" class="controls"></div>';
ändern in: $contentControlsAdv='';

am Besten so:

Code: Alles auswählen

//$contentControlsAdv='<div id="controls-adv" class="controls"></div>';
$contentControlsAdv='';

evtl. muss noch ein bissi mehr gemacht werden.

und noch was:
gibts in dem modul nciht die möglichkeit in der konfig die steuerelemente einfach auszublenen, indem man sagt: nicht anzeigen?

[Nakoda]

Nee! das war es leider auch nicht! Nun sind alle controls wech und die Slideshow startet automatisch.
Man hat zwar die Option was auszublenden aber die ist leider sehr binär. entweder an oder aus.
Es soll aber nur halb aus will sagen nur der Link "Slideshow starten".