PrettyPhoto-Galerie ein Vorschaubild u. Verweis auf mehrere Bilder

[lou67]

Hallo, ich habe die jquery Prettyphoto Imagegalerie von Stephane Caron in eine Homepage eingebunden. Diese funktioniert auch tadellos! momentan sehe ich unten 4 kleine Vorschaubilder, wenn ich nun auf eines dieser klicke, sehe ich diese bilder vergrößtert in der Box. Genau wie es sein soll. Ein großer Wunsch von mir wäre, wenn nur ein kleines Vorschaubild ist auf welches man klicken kann und in der Box erscheinen dann 8-10 Bilder.
Vielleicht kann mir da jemand helfen wie ich das hinbekomme! Vielen Dank!

 

[vitus37]

Hallo und willkommen in diesem Forum.

Eine Idee zur Realisierung wäre es alle Bilder in einen DIV-Container zu stecken und mit JavaScript (bzw. jQuery, wenn du es bereits nutzt) diesen bei Click auf ein spezielles Bild erscheinen zu lassen.

Google "jquery div anzeigen onclick";

Gruß

 

[lou67]

Hallo und vielen Dank für die Antwort! Der Effekt von der Prettyphoto-Galerie gefällt mir echt sehr gut und ich möchte dieses Script auch weiterhin verwenden. Ich möchte eigenlich nur erreichen, dass wenn man z.B. auf ein kleines Vorschaubild mit einem Fahrrad klickt,dass sich dann die Gallerie öffnet mit verschiedenen Fahrrädern. Darunter dan ein kleines Vorschaubild mit Helmen und bei klick öffnet sich die Gallerie mit den Helmen u.s.w. So wie das Script jetzt konfiguriert ist, sind auf der Homepage bereits alle kleinen Vorschaubilder zu sehen die sich dann in der Gallerie öffnen. Ich freue mich über jede Hilfe.

 

[Beach117]

Hallo und vielen Dank für die Antwort! Der Effekt von der Prettyphoto-Galerie gefällt mir echt sehr gut und ich möchte dieses Script auch weiterhin verwenden. Ich möchte eigenlich nur erreichen, dass wenn man z.B. auf ein kleines Vorschaubild mit einem Fahrrad klickt,dass sich dann die Gallerie öffnet mit verschiedenen Fahrrädern. Darunter dan ein kleines Vorschaubild mit Helmen und bei klick öffnet sich die Gallerie mit den Helmen u.s.w. So wie das Script jetzt konfiguriert ist, sind auf der Homepage bereits alle kleinen Vorschaubilder zu sehen die sich dann in der Gallerie öffnen. Ich freue mich über jede Hilfe.

Hallo, ich bin auch gerade dabei mit dem PrettyPhotoJS zu spielen und suche nach einer ähnlichen oder gleichen Problemlösung.
Im HTML Code sieht es ja so aus :

<a href="images/portfolio/pf4_large.jpg" class="image" rel="prettyPhoto[mixed]">
<img src="images/portfolio/n1.jpg" alt=""  width="210" height="190" /></a>

rel="prettyPhoto[mixed]

verweist ja auf die Bilder die sich dort drin befinden. Nur möchte ich ein Vorschaubild anzeigen und andere sollte "unsichtbar" im Hintergrund in [mixed] sich befinden und dann angezeigt werden wenn sich die "lightbox" öffnet.
Wo lege ich die weiteren Bilder an, so dass sie nicht sichtbar vorerst sind.

Ich hoffe ihr versteht was ich meine :shock: .

Vielen Dank im Voraus.

Gruß

 

[Beach117]

Falls es jemanden interessiert, hier die Lösung :

Hi,
first you should number them individually if you want to have seperate galleries running.
Second you should adjust your image links to a valid html code e.g. you have several starting <a href=...> elements but no closing </a>! Start with the first image to be shown and hide the others (to start from just one thumbnail).
Here is an example:

<a href="images/portfolio/uitbouw etage/uitbouwetage1.jpg" rel="prettyPhoto[gallery1]"><img class="fade" src="images/portfolio/uitbouw etage/uitbouwetage.jpg" alt="Verbouwing van de badkamer" /></a>
<div style="display: none;">
<a href="images/portfolio/uitbouw etage/uitbouwetage2.jpg" rel="prettyPhoto[gallery1]"></a>
<a href="images/portfolio/uitbouw etage/uitbouwetage3.jpg" rel="prettyPhoto[gallery1]"></a>
</div>

Hope that help....



Eigentlich gar nicht so schwer ;)
Hätte ich auch mal so drauf kommen können...

Cheers

 

[janbengun]

Das klappt auch bei mir. Allerdings werden bei weiteren angefügten Galerien immer die Bilder der letzten Galerie angezeigt. Was kann da verkehrt sein?

<div class="wrap">
<div class="indent">
<h2>Galerie</h2>
<div class="scroll">
<div class="clearfix">
<ul class="gallery-list">
<li class="grid_6">
<figure class="prettyPhoto img-container"><a href="images/full-sizes/fashion/fotografie-potsdam-01.jpg" rel="prettyPhoto[pp_gallery_01]"><img src="images/gallery/fotografie-potsdam-01.jpg" alt=""/><span class="zoom"></span><span class="gallery-hover"></span></a></figure>
<a href="images/full-sizes/fashion/fotografie-potsdam-02.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-03.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-04.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-05.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-06.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-07.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-08.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-09.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-10.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<a href="images/full-sizes/fashion/fotografie-potsdam-11.jpg" rel="prettyPhoto[pp_gallery_01]"></a>
<class="photo-title">Fashion
</li>
</ul>
<ul class="gallery-list">
<li class="grid_6">
<figure class="prettyPhoto img-container"><a href="images/full-sizes/wedding/fotografie-potsdam-01.jpg" rel="prettyPhoto[pp_gallery_02]"><img src="images/gallery/fotografie-potsdam-02.jpg" alt=""/><span class="zoom"></span><span class="gallery-hover"></span></a></figure>
<a href="images/full-sizes/wedding/fotografie-potsdam-02.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-03.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-04.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-05.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-06.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-07.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-08.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-09.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-10.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<a href="images/full-sizes/wedding/fotografie-potsdam-11.jpg" rel="prettyPhoto[pp_gallery_02]"></a>
<class="photo-title">Wedding
</li>

</ul>
</div>
</div>
</div>
</div>