mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 03:03 Benutzername: Passwort: Auto-Login

Thema: DHTML slideshow & lightbox Problem vom 23.02.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> DHTML slideshow & lightbox Problem
Autor Nachricht
Scolex
Threadersteller

Dabei seit: 14.03.2006
Ort: Oberschwaben
Alter: -
Geschlecht: Männlich
Verfasst Mi 23.02.2011 20:19
Titel

DHTML slideshow & lightbox Problem

Antworten mit Zitat Zum Seitenanfang

Hallo,

meine mäßigen JS Kenntnisse haben mich schon wieder vor ein Problem gestellt. *Schnief*

Ich würde gern ein modifiziertes Dynamic Drive slideshow Script mit der lightbox Funktion kombinieren.

Slideshow funktioniert auch tadellos, lightbox funktioniert aber nur eingeschränkt, da nur das erste Bild des arrays angezeigt wird.

Der Fehler ist wohl, dass das lightbox-array nicht mit dem slideshow-array mitgezählt wird!?!??

Aber wie bekomme ich das hin, dass immer die selbe Position des Arrays abgefragt wird???

Code:

      <script type="text/javascript">
       
        /***********************************************
        * DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * This notice must stay intact for legal use
        * Visit http://www.dynamicdrive.com/ for full source code
        ***********************************************/
       
        var photos=new Array()
        var photoslink=new Array()
        var which=0
       
        //define images. You can have as many as you want:
        photos[0]="../media/referenzen/thumbs/zf1_thumb.jpg"
        photos[1]="../media/referenzen/thumbs/zf2_thumb.jpg"
        photos[2]="../media/referenzen/thumbs/zf3_thumb.jpg"
       

       
        //Lightbox FullSize Array Links
        photoslink[0]="../media/referenzen/zf1.jpg"
        photoslink[1]="../media/referenzen/zf2.jpg"
        photoslink[2]="../media/referenzen/zf3.jpg"
       
        //do NOT edit pass this line
       
        var preloadedimages=new Array()
        for (i=0;i<photos.length;i++){
        preloadedimages[i]=new Image()
        preloadedimages[i].src=photos[i]
        }
       
       
        function applyeffect(){
        if (document.all && photoslider.filters){
        photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
        photoslider.filters.revealTrans.stop()
        photoslider.filters.revealTrans.apply()
        }
        }
       
       
       
        function playeffect(){
        if (document.all && photoslider.filters)
        photoslider.filters.revealTrans.play()
        }
       
        function keeptrack(){
        window.status="Image "+(which+1)+" of "+photos.length
        }
       
       
        function backward(){
        if (which>0){
        which--
        applyeffect()
        document.images.photoslider.src=photos[which]
        playeffect()
        keeptrack()
        }
        }
       
        function forward(){
        if (which<photos.length-1){
        which++
        applyeffect()
        document.images.photoslider.src=photos[which]
        playeffect()
        keeptrack()
        }
        }
        </script>   


Im Quellcode habe ich folgendes stehen:

Code:

                    <table border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="100%" colspan="2" height="22">
                       
                  <script>
                           document.write('<a href="'+photoslink[0]+'" rel="lightbox">')            
                            document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" class="teaser">')
                     document.write('</a>')
                         </script>
                    </td>
                      </tr>
                      <tr>
                        <td width="50%" height="21"><p align="left">1|1</td>
                        <td width="50%" height="21"><p align="right">
                     <a href="#" onClick="backward();return false"><img src="../layout/pic_nav_left.gif" width="15" height="15" /></a>&nbsp;
                     <a href="#" onClick="forward();return false"><img src="../layout/pic_nav_right.gif" width="15" height="15" /></a></td>
                      </tr>
                    </table>


THX
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Do 24.02.2011 01:03
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

   document.write('<a href="'+photoslink[0]+'" rel="lightbox[--namedergalleriehiereintragen---]">')

Meine Güte!


Zuletzt bearbeitet von DerM am Do 24.02.2011 01:04, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Scolex
Threadersteller

Dabei seit: 14.03.2006
Ort: Oberschwaben
Alter: -
Geschlecht: Männlich
Verfasst Do 24.02.2011 08:55
Titel

Antworten mit Zitat Zum Seitenanfang

Hmmm, funktioniert so leider nicht.
Habe einen beliebigen Namen in die Klammern gesetzt, es wird allerdings immer nur das erste Bild angezeigt und ich bekomme im lightbox-screen keine Buttns um "weiter" oder "zurück" zu blättern.
Auch die Anzeige "Bild 1 von 3" erscheint nicht...

Die Fehlerkonsole gibt keinen Fehler aus.

Menno!
  View user's profile Private Nachricht senden
Scolex
Threadersteller

Dabei seit: 14.03.2006
Ort: Oberschwaben
Alter: -
Geschlecht: Männlich
Verfasst Do 24.02.2011 10:27
Titel

Antworten mit Zitat Zum Seitenanfang

Ein Tip hat mir die Lösung gebracht. Muß dem href-tag eine id-vergeben und diese dann in der funktion mit

Code:
document.getElementById("lightboxlink").href = photoslink[which];


aurufen.

Habe aber noch eine Frage:

Wie kann ich bei der slideshow anzeigen lassen welches Bild im Array gerade angezeigt wird. Also Bild 1 von 3 zum Beispiel.

Die Anzahl im array vorhandenen Bilder bekomme ichh ja mit der Variablen "i"...

Code:
<td width="50%" height="21"><p align="left">Bild 1 von<script>document.write(i)</script></td>


Eigentlich macht das die keeptrack()-Funktion ja schon, aber halt im statusbar. Wie bekomm ich das denn in die Zeile dass ich habe "Bild 2 von 3" oder so ähnlich...

THX
  View user's profile Private Nachricht senden
 
Ähnliche Themen DHTML Problem in Frontpage
problem mit der lightbox
lightbox js - problem
Lightbox CSS Problem
lightbox problem
Endlosschleife in Slideshow - Problem!
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.