[GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

micfritschi · 17. Mai 2011 08:06

Hallo,

bin gerade auf das deutsche Forum aufmerksam geworden! Super - danke.

Ich arbeite schon länger mit CMSms und habe das Album-Modul bei verschiedenen Projekten eingesetzt. Da es nicht mehr weiterentwickelt wird brauche ich auch das Gallery-Modul. Für Fancy-Box etc. ist es natürlich super.

Für's Styling ist Album (für mich) klarer. Mit Gallery bekomme ich sowas (siehe Anhang) einfach nicht hin. Gibt es ein einfaches Template für Gallery oder soll ich für diese Layouts weiter das (noch gut funktionierende) Album-Modul verwenden?

Danke für etwas Licht ins Dunkle,
michael

BILD BILD
BILD BILD Titel
BILD BILD Beschreibung
nav -nav

Beitrag geändert von micfritschi (17. Mai 2011 08:10)

mike-r · 17. Mai 2011 13:41

Das sollte über "Titel" und "Kommentar" eigentlich recht einfach zu lösen sein.
Diese kannst Du bequem im Template via:
{$image->comment} und/oder {$image->titlename}
aufrufen.

nicmare · 17. Mai 2011 16:16

nix da. er meinte die pfeile unten links. zum durchblättern. hatten wir das thema nicht schon neulich?

micfritschi · 17. Mai 2011 16:17

Ja, das Ganze. Es hat so viel JavaScript etc - da sehe ich vor lauter Bäume den Wald nimmer...

NaN · 17. Mai 2011 18:42

Wäre sowas in Deinem Sinn: http://www.krugfoto.de/cms/index.php?page=zwei
Ist mit Gallery gemacht.

micfritschi · 18. Mai 2011 07:01

Ja, genau! Und den Text zum Bild kann ich dann mit {$image->comment} und/oder {$image->titlename} beifügen.

NaN · 18. Mai 2011 13:28

Also das Gallery Template sieht dazu so aus:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="gallery">
{foreach from=$images item=image}
    {if $image->isdir == 0 || $image->isdir == ''}
    <div class="gallery_img" style="width:525px;float:left;">
        <img src="{$image->thumb}" alt="{$image->title}" /></a>
    </div>
    {/if}
{/foreach}
    <div class="clearb"></div>
</div>

das javascript-Template so:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 525; // <- AN EIGENES LAYOUT bzw. BILDGRÖßE ANPASSEN
  var slides = $('.gallery_img');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#content').css('overflow', 'hidden');
  $('#gallery').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>');
    // Float left to display horizontally, readjust .slides width
//    .css({
//      'float' : 'left',
//      'width' : slideWidth
//    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  // HIER SIND DIE VOR/ZURÜCK BUTTONS
  $('#contentwrapper')
    .append('<div id="controls" style="position:absolute;bottom:70px;left:215px"><span class="control" id="leftControl">&nbsp;<&nbsp;</span><span class="control" id="rightControl">&nbsp;>&nbsp;</span></div>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : eval(slideWidth*(-currentPosition))
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide();  } else{ $('#leftControl').show()  }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }    
});
</script>

Das müsste eigentlich schon alles sein.
Muss man evtl. noch an seine Seite anpassen (Siehe kommentare).
Eignet sich aber nur für mittelgroße Bilder mit mäßiger Anzahl.
(Weil die Bilder alle auf einmal und in voller Größe geladen werden)

Zu dem Zeitpunkt gabs noch kein supersizer. Deshalb habe ich die Gallery so eingestellt, dass große Thumbnails erstellt werden (525 x 400) und nur die Thumbnails angezeigt werden.

Hoffe das hilft zumindest im Ansatz weiter.

micfritschi · 18. Mai 2011 15:22

Danke, NaN! Habe es natürlich gleich auf meiner lokalen Installation ausprobiert. Allerdings erfolglos. Folgende Fragen:

Beim Template, <img src="{$image->thumb}" alt="{$image->title}" /></a> ist der Anker gerschlossen, geht aber nirgends auf. Braucht es da etwas?

Die Steuerelemente werden nicht angezeigt. Braucht es irgendwo ein DIV #contentwrapper? Das CSS habe ich vom Default-Template gelassen.

Die folgenden Bilder werden nachfolgend angezeigt, siehe Bild.

Was mache ich da falsch? CSS?

NaN · 18. Mai 2011 18:56

Ich habs mal etwas abgeändert. Sollte jetzt unabhängig vom verwendeten Layout funktionieren. Und bevor ich hier wieder haufenweise Poste, hab ich gleich die Export-Funktion des Gallery-Moduls und die Upload-Funktion des Forums ausprobiert: Gallery-tpl-Slide.zip (feine Sache big_smile )
Einfach die Datei herunterladen, entpacken und im Gallery Modul im Tab Templates importieren.
Die Bildgröße ist hier auf 640 x 480 eingestellt. Das muss man in den Einstellungen des Templates noch an seine Wünsche anpassen.
Aber zusätzliches CSS oder HTML Zeugs sollte nicht nötig sein.
Einzig die Vor und Zurück Buttons sollte man mal noch hübsch machen und sich vielleicht noch etwas einfallen lassen, damit die nicht immer hin und her springen.
Da war ich grad zu faul wink

micfritschi · 20. Mai 2011 12:48

Wau! Vielen Dank, NaN. Ich bin jetzt am Stylen und kümmere mich noch um die Pfeile.

Das Javascript habe ich auch langsam begriffen. Sobald das Teil 'live' ist, poste ich den Link.

Connie · 05. Juli 2011 11:55

und, ist es fertig? Bin neugierig ;=)

Forum für CMS/made simple

#1 17. Mai 2011 08:06

[GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#2 17. Mai 2011 13:41

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#3 17. Mai 2011 16:16

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#4 17. Mai 2011 16:17

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#5 17. Mai 2011 18:42

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#6 18. Mai 2011 07:01

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#7 18. Mai 2011 13:28

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#8 18. Mai 2011 15:22

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#9 18. Mai 2011 18:56

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#10 20. Mai 2011 12:48

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

#11 05. Juli 2011 11:55

Re: [GELÖST] [GELÖST] Einfaches Gallery-Template oder doch Album?

Fußzeile des Forums