Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#76 01. Dezember 2013 23:05

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
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:

<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 -->
<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:

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)

Offline

#77 01. Dezember 2013 23:46

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

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)

Offline

#78 01. Dezember 2013 01:10

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Danke, jetzt werd ich es mir merken :-)

PS: Link hab ich geändert!

Offline