Cebra: Bilder Navigation mit Lightbox-Verlinkung

SELF-Forum

Bilder Navigation mit Lightbox-Verlinkung

Cebra Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!
Folgendes Problem:

Ich hab 5 Bilder, durch die per javascript navigiert wird.Hat ja den Vorteil, dass die Seite nicht immer wieder neu geladen wird. Funktioniert auch.

Jetzt möchte ich aber die einzelnen Bilder verlinken, so dass auf klick die lightbox geöffnet wird.

Also meine Frage konkret:
Kann ich in meiner Javascript-Bild-Navigation die einzelnen Bilder verlinken?

Danke!

Mein Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<link rel="stylesheet" type="text/css" href="../layout.css" />  
<link rel="stylesheet" type="text/css" href="../roll.css" />  
[code lang=javascript]  
<script type="text/javascript">  
var imgs = [  
  'images/00.gif',  
  'images/01.jpg',  
  'images/02.jpg',  
  'images/03.jpg',  
  'images/04.jpg',  
  'images/05.jpg'  
  
  
];  
  
imgs.rotate = function (direction) {  
  
  if      (direction > 0) { this.push(this.shift());  }  
  else if (direction < 0) { this.unshift(this.pop()); }  
}  
  
function nextImg(direction) {  
  
  imgs.rotate(direction);  
  document.getElementById("rollimg").src = imgs[0];  
}  
  
  
  
</script>

</head>

<body>

<div class="concontent"><table width="100%" border="0">
  <tr>
    <td><img src="images/00.gif" alt="Bildwechsel mit Javascript" id="rollimg"/>
  </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>  <script type="text/javascript">
<!--
document.write ('<p>&nbsp;&nbsp;<a href="javascript:nextImg(- 1)"><img src="../images/zur.gif" alt="" width="15px"/></a><a href="javascript:nextImg(1)"><img src="../images/vor.gif" alt="" width="15px" /></a></p>');
// -->
</script>
</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>
[/code]

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder Navigation mit Lightbox-Verlinkung

    Cebra
    – Informationen zu den Bewertungsregeln

    Sorry, der zweite Javascript-Code ist nicht richtig formatiert...

    <script type="text/javascript">  
                        <!--  
        document.write ('<p>&nbsp;&nbsp;<a href="javascript:nextImg(- 1)"><img src="../images/zur.gif" alt="" width="15px"/><\/a><a href="javascript:nextImg(1)"><img src="../images/vor.gif" alt="" width="15px" /><\/a><\/p>');  
                        // -->  
                        </script>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Bilder Navigation mit Lightbox-Verlinkung

    Edgar Ehritt
    – Informationen zu den Bewertungsregeln

    Hallo Cebra,

    Also meine Frage konkret:
    Kann ich in meiner Javascript-Bild-Navigation die einzelnen Bilder verlinken?

    ja. Das <img>-Element kann in ein <a>-Element gesetzt werden. Letzeres könnte dann entweder über seine ID genauso verändert werden wie <img> auch, oder über DOM durch document.getElementById("rollimg").parentNode angesprochen und verändert werden. Ob Du dazu das Objekt var imgs anpasst, um die Verweisziele zu speichern, oder ein eigenes Objekt nutzt, ist egal.

    <td>  <script type="text/javascript">
    <!--
    document.write ('<p>&nbsp;&nbsp;<a href="javascript:nextImg(- 1)"><img src="../images/zur.gif" alt="" width="15px"/></a><a href="javascript:nextImg(1)"><img src="../images/vor.gif" alt="" width="15px" /></a></p>');
    // -->
    </script>

    Es ist kein Grund ersichtlich, warum diese HTML-Passage via Javascript ausgegeben wird. Warum also der Auffand?

    Gruß aus Berlin!
    eddi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder Navigation mit Lightbox-Verlinkung

      Shadowcrow
      – Informationen zu den Bewertungsregeln

      'ǝɯɐu$ ıɥ

      Es ist kein Grund ersichtlich, warum diese HTML-Passage via Javascript ausgegeben wird. Warum also der Auffand?

      ich würde mal raten, das nur bei aktiviertem javascript die links angezeigt werden sollen und im <noscript> bereich alternative links serviert werden, so mache ich das bei meinen thickbox einbindungen da mir das normale fallback einfach nicht ansprechend genug ist.

      ssnɹƃ
      ʍopɐɥs

      --
      Sleep is a poor substitute for caffeine.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln