Gallerymodul Vorschaubilder

Sonne · 17. Juni 2011 19:26

Ich verwende das Gallerymodul mit dem Fancyboxtemplate. Laut Modulhilfe kann ich mit number='6' die Anzahl der Vorschaubilder auf 6 begrenzen, was ja bei großen Gallerien sehr sinnvoll ist. Allerdings werden dann auch beim Draufklicken immer nur die ersten 6 Bilder angezeigt.
Bei action='showrandom' ist es genau so.
Was muss ich tun, damit nur 6 Vorschaubilder angezeigt werden, aber beim Draufklicken alle Bilder der Gallerie??

nicmare · 17. Juni 2011 19:43

du könntest mit zwei templates arbeiten. also zB eine kopie vom fancybox template machen und dort die maximale anzahl der bilder einstellen. und nun das entsprechende template der galerien zuweisen

Cherry · 17. Juni 2011 20:06

Dazu muß man ein bischen im Modulecode ändern.
Achtung: Das ist auf eigene Gefahr und muß bei einem Update des Moduls natürlich wieder neu gemacht werden:

Alle Bilder anzeigen geht so:

1.
Hack in der action.default.php:
Zeile 247:

// Get the images we want
//$images = array_splice($images, $start-1, $number); //auskommentieren

Somit werden alle Bilder an Smarty übergeben

2.
Dann kann man per Smarty Logik festlegen, daß die Bilder einer Seite angezeigt werden, die anderen auf 'display: none' gesetzt werden

Beispiel hier: Fancybox template

Hier klicken, um den Code zum Kopieren zu markieren

[== smarty ==]
{assign var="zaehler" value=1}

{foreach from=$images item=image}
    <div class="img">
    {if $image->isdir}
        <a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
        {$image->titlename}
    {else}
    
    
    

            {if $zaehler >= (($currentpage-1)*$number +1) && $zaehler <= ($currentpage * $number) } {* Bild anzeigen, wenn.. *}
                {* $zaehler *} {* $zaehler zur Kontrolle evtl anzeigen *}
                
                 <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery" ><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"  /></a>
            {else} {* sonst nicht anzeigen ... *}
            
            
               <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery" style="display: none"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" style="display: none"/></a>
               
            {/if}
            {assign var="$zaehler" value=$zaehler++}
    {/if}
    </div>
{/foreach}

Dabei aber nicht vergessen, daß das bei großen Galerien ganz schön auf die Performance drücken kann (es werden ja immer alle Vorschaubilder geladen). Ich selber habe das so im Einsatz bei Galerien bis zu 150 Bildern.

Sonne · 18. Juni 2011 20:42

ich habe die Variante von Cherry versucht, aber es hat trotzdem nicht geklappt. Nur die Ladezeiten für die einzelnen Bilder wurden länger (so schien es mir zumindest).
Das was unter 1. steht, stand eh schon in der action.default.php. Und dann habe ich das, was unter 2. in dem schwarzen Kasten steht, eingefügt. War das so richtig??

mike-r · 18. Juni 2011 20:56

der Spass ginge auch für Browser > IE6 ohne Hack und doppelten Boden über den verschachtelten +-Selektor in Verbindung mit dem :first-child-selektor.
Im Groben (ungetestet) etwa der Art: #id-der-gallery li:first-child+li+li+li+li+li~li {display:none}

Beitrag geändert von mike-r (19. Juni 2011 22:15)

Cherry · 18. Juni 2011 21:00

@ Sonne:
nicht ganz...

also:
das was unter erstens steht ....ist schon drin, aber du mußt halt die // hinmachen vor die Zeile, damit die nicht abgearbeitet wird. Das bewirkt daß eben nicht nur soundsoviele Vorschaubilder ausgegeben werden sondern alle.

Das was unter 2. Steht wäre dann dein template für Fancybox.
Das regelt dann daß du z.B. ne Seitenschaltung bekommst und daß nur die Vorschaubilder der jeweiligen Seite angezeigt werden.
Die anderen werden solange auf display: none gesetzt. (Die Idee es so zu machen habe ich mir beim Uralten NeoGallery Modul abgeschaut. Da ging das nämlich immer so schön, daß man ganze Bildserien durchlaufen lassen konnte.)

VG
Cherry

mike-r · 19. Juni 2011 22:15

Zu meiner CSS-Idee; hab ich jetzt dochmal getestet, und es gibt da 2½ Möglichkeiten, habe da einen neuen Thread dazu gemacht:
Gallery: nur einige Thumbnails anzeigen, aber in der Thickbox alle

Sonne · 21. Juni 2011 13:22

Die Idee mit
#id-der-gallery li:first-child+li+li+li+li+li~li {display:none}
hört sich ja nach wenig Aufwand an. Wo genau muss ich das denn jetzt reinschreiben? Ist id-der-gallery der Galeriename oder bleibt das so stehen?

mike-r · 21. Juni 2011 15:03

#id-der-gallery ist die ID (oder Klasse) des die Galerie umschliessenden DIV oder UL. Ist glaube in jeder Thickbox anders.
Hab grad keine Standard-Galerie ohne Modifikation hier, afair müsste das in der Fancybox div.gallerydummy und/oder ul.gallery sein.

Bzgl. der Einschränkungen siehe mein Howto dazu...

Sonne · 21. Juni 2011 19:40

Wirklich geholfen hat mir der Hinweis leider nicht. Das Galerie-Template sieht so aus:

<div class="gallery">
<p></p>
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}

{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}

<p></p>

{foreach from=$images item=image}
<div class="img">
{if $image->isdir}
<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
{$image->titlename}
{else}
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/if}

</div>
{/foreach}
<div class="galleryclear"> </div>
</div>

Was genau muss ich denn jetzt wo hin schreiben???
Werden dann auch bei allen Untergalerien nur 6 Vorschaubilder angezeigt?

Beitrag geändert von Sonne (21. Juni 2011 19:41)

mike-r · 22. Juni 2011 22:29

Ich hab ein anderes Template, in Deinem Falle müsste der Aufruf auf das div zielen, etwa:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
.gallery div.img:first-child+div+div+div+div+div~div.img {display:none}

Beitrag geändert von mike-r (22. Juni 2011 22:50)

Sonne · 22. Juni 2011 20:51

irgendwie klappt das alles nicht. Kannst du mir etwas ausführlicher schreiben, was ich genau machen muss? So Schritt für Schritt???

mike-r · 23. Juni 2011 22:15

Du kopierst meinen letzten Vorschlag in Dein CSS entweder ins Seitentemplate oder ins Fancybox-template. Fertig.

Sollte es nicht funktionieren, wäre ein Link zum Problem ganz hilfreich. Alternativ kannst Du mittels Firebug schauen, ob die Regel überhaupt erkannt wird, und wenn ja, von was sie überschrieben wird.

Edit: Sollte es sich um diese Schulseite handeln, Du verwendest da .thumb statt .img, dementsprechend müsstest Du die Regel anpassen.

Beitrag geändert von mike-r (23. Juni 2011 22:20)

Sonne · 23. Juni 2011 18:33

Wenn ich das ins Template kopiere (egal in welches), dann erscheint immer einfach nur

[== css ==]
.gallery div.thumb:first-child+div+div+div+div+div~div.thumb {display:none}

als Text auf der Seite.
Es geht nicht um die Schulseite, sondern um www.kifaz-miteinander.de und dort z. B. die News vom Kita-Fest.

Beitrag geändert von Sonne (23. Juni 2011 18:34)

mike-r · 23. Juni 2011 19:28

mike-r schrieb:

in Dein CSS entweder ins Seitentemplate oder ins Fancybox-template

Gemeint ist, das dort ins entsprechende CSS reinzukopieren, nicht ins eigentliche Template.
Beim Fancy-box-template ist das "Stylesheet-Template" unterhalb des Smarty-templates.

Edit: grad geschaut, dort wiederum verwendest Du wieder .img

Beitrag geändert von mike-r (23. Juni 2011 19:49)

Sonne · 24. Juni 2011 20:44

Ich glaube, ich habe das jetzt an die richtige Stelle kopiert. Das Stylesheet-Template fängt jetzt so an:

.gallery div.img:first-child+div+div+div+div+div~div.img {display:none}

.gallery .img {
height: 120px;
/*width: 120px; Adjust as you see fit */
float: left;
margin: 10px;
text-align: center;
}

.gallery .img a {
display: inline-block;
border: 2px solid #ddd;
padding: 1px;
}

.gallery .img a:hover {
border-color: #777;
}

Aber es passiert nichts. Ich habe immer noch alle Vorschaubilder, aber zumindest keine Fehlermeldung mehr. sad
Oder hab ich wieder was falsch gemacht?

mike-r · 25. Juni 2011 22:48

Ich sehe nur 6 Bilder yikes
Welchen Browser verwendest Du? In IE6 geht das nicht, sagte ich aber bereits.

Sonne · 26. Juni 2011 19:17

Mitlerweile sind tatsächlich nur noch 6 Bilder zu sehen. Ich habe jemanden gefunden, der mir das machen konnte und zwar folgendermaßen:

Unter Inhalte -> Gallery -> Templates -> Fancybox muss man die Bearbeitung des Templates aufrufen. Das ist nicht sonderlich lang. Man findet recht schnell diese Zeile:
{foreach from=$images item=image}
Vor dieser Zeile muss man einen Zähler initialisieren, also eine Zeile davor einfügen und hinschreiben:
{assign var=i value=0}
Der muss jetzt hochlaufen. Man fügt also ans Ende der „foreach“-Schleife (vor „{/foreach}“) das hier ein:
{assign var=i value=$i+1}
Jetzt kann man ab einer bestimmten Anzahl Bilder unsichtbar machen. Dafür ändert man die Zeile
<div class="img>
in:
<div class="img"{if $i >= 6} style="display: none;"{/if}>
Ändert man die Zahl “6”, so erhält man entsprechend mehr oder weniger Vorschaubilder.
Aber Achtung: Die Bilder werden nicht angezeigt, aber der Quelltext wird trotzdem geladen, also nicht mit der Bildanzahl übertreiben.

Forum für CMS/made simple

#1 17. Juni 2011 19:26

Gallerymodul Vorschaubilder

#2 17. Juni 2011 19:43

Re: Gallerymodul Vorschaubilder

#3 17. Juni 2011 20:06

Re: Gallerymodul Vorschaubilder

#4 18. Juni 2011 20:42

Re: Gallerymodul Vorschaubilder

#5 18. Juni 2011 20:56

Re: Gallerymodul Vorschaubilder

#6 18. Juni 2011 21:00

Re: Gallerymodul Vorschaubilder

#7 19. Juni 2011 22:15

Re: Gallerymodul Vorschaubilder

#8 21. Juni 2011 13:22

Re: Gallerymodul Vorschaubilder

#9 21. Juni 2011 15:03

Re: Gallerymodul Vorschaubilder

#10 21. Juni 2011 19:40

Re: Gallerymodul Vorschaubilder

#11 22. Juni 2011 22:29

Re: Gallerymodul Vorschaubilder

#12 22. Juni 2011 20:51

Re: Gallerymodul Vorschaubilder

#13 23. Juni 2011 22:15

Re: Gallerymodul Vorschaubilder

#14 23. Juni 2011 18:33

Re: Gallerymodul Vorschaubilder

#15 23. Juni 2011 19:28

Re: Gallerymodul Vorschaubilder

#16 24. Juni 2011 20:44

Re: Gallerymodul Vorschaubilder

#17 25. Juni 2011 22:48

Re: Gallerymodul Vorschaubilder

#18 26. Juni 2011 19:17

Re: Gallerymodul Vorschaubilder

Fußzeile des Forums