Forum für CMS/made simple

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 799

Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Hallo!

Es hapert bei mir wieder mal am Photoswipe - Ich hab hier eine Seite gebastelt Link.
Unten sieht man ein paar Bilder - klickt man darauf bekommt man sie mittels einer Lightbox angezeigt. Verkleinert man jetzt das Browserfenster merkt man, dass er eine andere Galerie lädt - hier sollte per Klick Photoswipe starten - tut er aber leider nicht.

Angezeigt werden die Bilder mit dem Gallery-Modul - hier das Template:

 Hier klicken, um den Code zum Kopieren zu markieren

<div class="gallery">

<!--{if !empty($module_message)}<h2>{$module_message|escape}</h2>{/if}
{if !empty($gallerytitle)}<h2>{$gallerytitle}</h2>{/if}
{if !empty($gallerycomment)}<p>{$gallerycomment}</p>{/if}
<p>{$imagecount}</p>

<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>-->

<ul class="block-grid six-up mobile-four-up ps-gallery">
{foreach from=$images item=image}
  {if $image->isdir}<li><a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb}" alt="{$image->titlename}" /></a><br />{$image->titlename}</li>
{else}
  <li>
    <a href="{$image->file}" title="{$image->titlename}" class="gal">
    <img src="{$image->thumb}" alt="{$image->titlename} - {$image->comment}" title="{$image->titlename}">
    </a>
  </li>
{/if}
{/foreach}
</ul>

<!--[if lte IE 6]>
<p class="alert">Ihr InternetExplorer ist leider zu alt um die Bilder als Galerie anzuzeigen.
Sorry...</p>
<![endif]-->

<div class="galleryclear">&nbsp;</div>
</div><!-- /gallery -->

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="photoswipe/js/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/js/photoswipe.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  var fotos = $(".ps-gallery a.gal").photoSwipe({ imageScaleMethod: 'fitNoUpscale', captionAndToolbarAutoHideDelay: '8000' });
});
</script>

Firebug gibt mir das hier aus:

 Hier klicken, um den Code zum Kopieren zu markieren

ReferenceError: $ is not defined
	
$(document).ready(function(){

Vielleicht könnt ihr das Problem finden - Vielen Dank!

Beitrag geändert von brandy (01. Dezember 2013 01:10)

Klenkes

Server-Pate

Ort: 89428 Syrgenstein

Registriert: 17. Dezember 2010

Beiträge: 1.437

Re: Gallery mit mobiltauglichem Photoswipe

Das kommt daher, dass jQuery erst nach dem Einbinden von Photoswipe geladen wird.

Deine Reihenfolge der Javascripts:
1. klass.min.js
2. photoswipe.min.js
3. photoswipe Initialisierung!
4. jQuery

Danach kommt lightbox.js und deshalb funktioniert das auch.

Du solltest jQuery noch vor klass.min.js einbinden.

P.S.
Dein Link oben ist falsch. Das Link am Ende muss weg.

Beitrag geändert von Klenkes (01. Dezember 2013 23:47)

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 799

Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Danke, jetzt werd ich es mir merken :-)

PS: Link hab ich geändert!