Problem mit prettyphoto

[Acki77]

Hallo zusammen,

ein Freund hat mich gebeten seine Seite zu überarbeiten. Nun habe ich ein Problem bei dem ich nicht weiterkomme.
Auf der Seite ist ein Bild eingebettet, das soll bei Klick größer erscheinen. Ich habe mir gedacht, dass ich ich prettyphoto dafür einsetzte... nur ist das Bild komisch eingebunden. Hier ist der Code:

 <div id="video-wrapper" data-video-type="image" data-width="" data-height="720" data-url="assets/media/home/home_layout3/images/jesus.jpg " > 
                                  <div class="module-galleries-preview-description-text"></div>   
                                         
                            </div>

Habe diese Art der Einbindung mit "data-url" noch nicht gesehen! Ich habe keine Ahnung wie ich dort prettyphoto einbinden soll. Kann mir jemand weiterhelfen? Das Bild soll bei Klick nur vergößert werden, muss auch nicht unbedingt mit prettyphoto sein. Vielleicht hat ja jemand guten einen Tipp! Vielen Dank schonmal!

 

[thecain]

der "data-" Tag ist für eigene, gültige Attribute die in Javascript weiterverwendet werden können.

http://www.w3.org/TR/2010/WD-html5-...tom-non-visible-data-with-the-data-attributes

 

[Acki77]

oha! So ganz steige ich da noch nicht durch! Kann ich eventuell mit "onclick" arbeiten?

 

[thecain]

So wie es aussieht hat er den Code von irgendwo komisch kopiert oder bereits mit einer Gallerie gearbeitet. Wenn du es ihm überarbeitest kannst du das Bild ja gleich in <img> Tags packen und dann prettyphoto oder sonst eine Gallerie einsetzen.

Ohne die konkrete Seite zu sehen kann ich sonst nur ins blaue raten.

 

[Acki77]

Das habe ich auch schon versucht, leider zerschießt sich das komplette Layout, die Unterseiten kann man nicht mehr übers Menü aufrufen etc.
Den Code hat er wohl hierher, da war vorher ein Video eingebunden: schein ein Template zu sein!

 <div id="module-container-holder" class="module-position-cc" data-id="module-position-cc">
            <div id="module-home-layout3" class="module-home-layout3"><!-- .shadow-side-all -->
           
                <div id="module-home-layout3-holder">
               
                    <div id="home-top-block"> 
                          <div class="headimage">
            <img src="assets/media/home/home_layout3/images/mg.png" /> 
            </div>       
                        <div id="home-video-block" class="shadow-side-all">
                            <!-- DEMO HTML5/FLASH FALLBACK VIDEO -->
                            <!--
                            <div id="video-wrapper" data-video-type="standalone" data-width="680" data-height="391"
                                  data-url1="http://video-js.zencoder.com/oceans-clip.mp4" data-type1="video/mp4"
                                  data-url2="http://video-js.zencoder.com/oceans-clip.webm" data-type2="video/webm"
                                  data-url3="http://video-js.zencoder.com/oceans-clip.ogv" data-type3="video/ogg"
                                  data-poster="js/video-js/oceans-clip.png">               
                            </div>
                            -->               
                            <!-- DEMO VIMEO -->
                           
                            <div id="video-wrapper" data-video-type="youtube" data-width="" data-height="720" data-url="http://www.youtube.com/embed/?vq=hd1080&rel=0&autoplay=1&autohide=1 "> 
                                  <div class="module-galleries-preview-description-text"></div>             
                            </div>
                            <!---->
                            <!-- DEMO YOUTUBE -->
                            <!--
                            <div id="video-wrapper" data-video-type="youtube" data-width="680" data-height="391"
                                  data-url="http://www.youtube.com/embed/">               
                            </div>
                            -->                       
                        </div>

Eigentlich will ich jetzt nicht alles umstricken! Würde mir eigentlich reichen wenn es ne Lösung gäbe um nur das Bild zu vergrößern!

 

[thecain]

http://lokeshdhakar.com/projects/lightbox2/

Ich würde dir eine Gallerie in der Art empfehlen. (Da gibts noch etliche andere, eventuell mal Google bemühen). Wie die momentane Lösung ist, kann ich nicht sagen. Auf jeden Fall muss da noch einiges mehr drum rum sein, sonst würde es im moment nicht funktionieren.

Um eine Änderung wirst du wohl kaum rum kommen. Vor allem wenns eine Überarbeitung sein soll.
Ausser es gibt hier jemanden der Bilder so schonmal eingebunden hat (Vermute mal nicht..)

 

[Acki77]

Unter "Überarbeitung" verstand er Links anpassen, Bilder tauschen etc! Aber nicht die ganze Seite von Grund auf! Besteht nicht die Möglichkeit das über "onclick" zu realisieren?

 

[Sempervivum]

Wollte erst vorschlagen, ein a-href-Tag um das div zu legen:

<a href="url_des_grossen_bildes" rel=”prettyPhoto"><div id="video-wrapper" data-video-type="image" data-width="" data-height="720" data-url="assets/media/home/home_layout3/images/jesus.jpg " >
                                  <div class="module-galleries-preview-description-text"></div>
                                    
                            </div></a>

Allerdings ist dies nur unter HTML5 zulässig. Kannst du deinen Doctype entspr. ändern?
Wenn es so nicht geht, kannst Du die Javascript-API von Prettyphoto verwenden, um das große Bild zu öffnen:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

<div onclick='$.prettyPhoto.open("url_des_grossen_bildes","Title","Description");'  id="video-wrapper" usw.

Insgesamt ist es aber unbefriedigend, diese exotische Einbettung von Bildern beizubehalten.
Viel Erfolg und viele Grüße - Ulrich

 

[Acki77]

Super! Danke Ulrich! Werde ich direkt nacher mal ausprobieren und Feedback geben!