Anzeige

Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht | PSD-Tutorials.de

Erstellt von devue, 04.07.2011.

  1. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    Hallo,
    ich mache gerade eine Fotografen Webseite für mich und habe noch wenig Kenntnisse, was die jeweiligen Sprachen betrifft. Ich möchte für meine Gallerie die greybox verwenden, die ich mit Dreamweaver eingebunden habe. Ich bin inzwischen schon so weit, dass die greybox funktioniert, wenn ich ein ganz normales Image verwende. Ich dachte, jetzt müsste ich es bei meiner entsprechenden Seite (Rollover Images)einfach an die richtige Stelle setzten. Wenn ich es aber bei meinem Rolloverbild vor die img Zeilen setzte, funktioniert der Rollover-Effekt nicht mehr. Was muss ich also tun? An welche Stelle des Codes (s.u.)müssen die
    <a href="Pfad/zum/Bild.jpg" rel="gb_imageset[besteBilder]" title="mein Bestes Bild!"> Zeilen? Vielleicht kann mir jemand einen Tipp geben!?
    Hier der entsprechende Code:
    Code (Text):
    1.  
    2. <script type="text/javascript">
    3. function MM_swapImgRestore() { //v3.0
    4.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    5. }
    6. function MM_findObj(n, d) { //v4.01
    7.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    8.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    9.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    10.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    11.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    12. }
    13.  
    14. function MM_swapImage() { //v3.0
    15.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    16.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    17. }
    18. </script>
    19. <!-- InstanceEndEditable -->
    20. <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    21. <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    22. <style type="text/css">
    23. a:link {
    24.     color: #aaabad;
    25. }
    26. a:visited {
    27.     color: #aaabad;
    28. }
    29. a:hover {
    30.     color: #aaabad;
    31. }
    32. </style>
    33.  
    34. <script type="text/javascript">
    35.     var GB_ROOT_DIR = "./GreyBox_v5_54/greybox/";
    36. </script>
    37. <script type="text/javascript" src="GreyBox_v5_54/greybox/AJS.js"></script>
    38. <script type="text/javascript" src="GreyBox_v5_54/greybox/AJS_fx.js"></script>
    39. <script type="text/javascript" src="GreyBox_v5_54/greybox/gb_scripts.js"></script>
    40. <link href="GreyBox_v5_54/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
    41. </head>
    42.  
    43. <body onLoad="MM_preloadImages('images/still clear.jpg','images/WasserLand clear.jpg','images/schwarzweiss clear.jpg','images/inmiten clear.jpg','images/Berlin clear.jpg')">
    44.  
    45. <div class="container">
    46.   <div class="header">
    47.     <h1><a href="#">daniela horstmann photographie</a></h1>
    48.     <ul id="MenuBar1" class="MenuBarHorizontal">
    49.       <li><a href="index.html">home</a></li>
    50.       <li><a href="portfolio.html">portfolio</a></li>
    51.       <li><a href="über.html">&uuml;ber</a></li>
    52.       <li><a href="kontakt.html">kontakt</a></li>
    53.     </ul>
    54. <!-- end .header --></div>
    55.   <div class="content"><!-- InstanceBeginEditable name="hauptinhalt" -->
    56.     <table width="940" border="0" align="center" cellpadding="0" cellspacing="0">
    57.       <tr>
    58.         <td height="269" align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Still','','images/still clear.jpg',1)"><img src="images/still soft.jpg" alt="hier geht es zur Gallerie Still" name="Still" width="306" height="207" border="0"></a></td>
    59.         <td rowspan="2" align="center" valign="bottom"><a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)"><img src="images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0"></a></td>
    60.         <td width="306" valign="bottom"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Schwarzweiß','','images/schwarzweiss clear.jpg',1)"><img src="images/schwarzweiss soft.jpg" alt="hier geht es zur galerie schwarzweiß" name="Schwarzweiß" width="306" height="207" border="0"></a></td>
    61.       </tr>
    62.       <tr>
    63.         <td rowspan="2" align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Inmitten','','images/inmiten clear.jpg',1)"><img src="images/inmitten soft.jpg" name="Inmitten" width="306" height="207" border="0"></a></td>
    64.         <td height="84">&nbsp;</td>
    65.       </tr>
    66.       <tr>
    67.         <td height="252" colspan="2" align="center" valign="middle"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Berlin','','images/Berlin clear.jpg',1)">  <img src="images/Berlin soft.jpg" alt="hier geht es zur Galerie Berlin" name="Berlin" width="306" height="207" hspace="150" border="0"></a></td>
    68.       </tr>
    69.     </table>    
    70.  
    LG devue
    P.S.Diesen Hinweis habe ich gefunden, funktioniert allerdings nicht: http://www.markandbetty.c (unten: Probleme mit Rollover und Greybox)
     
    #1      
  2. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Hallo,

    ich habe leider immer noch keine Lösung gefunden. Weiß keiner einen Rat!?
    VG devue
     
    #2      
  3. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    guten Morgen....

    ich glaube ich habe Deinen Fehler gefunden...

    Code (Text):
    1.         <td rowspan="2" align="center" valign="bottom"><a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)"><img src="images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0"></a></td>
    ändere den mal in:

    Code (Text):
    1.         <td rowspan="2" align="center" valign="bottom"><a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)"><img src="images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0"></a></td>
    du kannst nicht ein link in einen Link machen. Du musst schon den vorhandenen Link anpassen ;)
     
    #3      
  4. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Guten Morgen Paric,

    super, vielen Dank! Das klappt schon mal!. Wo oder wie muss ich denn jetzt die nächsten Zeilen, z.B.:

    Code (Text):
    1.  a href="gallery/Wasserland/fire.jpg" rel="gb_imageset[Wasserland]" title="Fire"
    (es sollen ja mehrere Bilder gezeigt werden) einsetzten?

    Vielen Dank und einen schönen Tag!
    VG devue
     
    #4      
  5. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Du musst jetzt für jedes einzewlne bild folgende Zeile schreiben:

    Code (Text):
    1. <td rowspan="2" align="center" valign="bottom"><a href="gallery/Wasserland/fire.jpg" rel="gb_imageset[Wasserland]" title="Fire" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)"><img src="images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0"></a></td>
    Natürlich musst Du Dein MouseOver noch anpassen, aber das wirst du selber packen denke ich ;)

    Was Du mit dem code machst ist im Prinzip über rel="gb_imageset[Wasserland]" Deiner Greybox sagen, welche Dateien zur Galie Wasserland gehören.

    Viel Glück :)
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    das ist eigentlich eher autsch.
    wenn du eine liste von Bildern (galerie) anzeigen willst, verzichte am besten auf das Tabellengewurstel.
    Code (Text):
    1.  
    2. <ul id="galerie">
    3.   <li><a href="bildpfad"><img src="thumbnailpfad" alt="" /></a></li>
    4.    <li><a href="bildpfad"><img src="thumbnailpfad" alt="" /></a></li>
    5. </ul>
    6.  
    so kannst du bequem weitere Listenpunkte einfügen, und das ganze per css auch noch beliebig anordnen und gestalten.

    und auf Leerzeichen in Dateinamen verzichten.
     
    #6      
  7. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    @Paric: Wahrscheinlich stehe ich auf dem Schlauch! Wenn ich die Zeilen, wie du sie geschrieben hast unter die vorherige Zeile setzte, habe ich das thumb (wasserlandsoft bzw. clear) doppelt.
    Ich habe zurzeit 5 verschiedene Galeriebereiche. Indem obigen Bereich Wasserland habe ich ein Thumb (als Rollover), dass die Galerie (greybox) mit weiteren Bildern (z.B. 1. Fahrwasser, 2. Fire s.o.) öffnet. Wie muss ich das jetzt zusammenfügen?
    Bin, wie erwähnt, gerade erst angefangen...
    @sokie: die Tabelle, mit der ich die 5 verschiedenen Galeriebereiche (mit den entsprechenden thumbs) angeordnet habe, war für mich als Laie erstmal die einfachste Version. Werde mir nochmal anschauen, wie ich es besser mit css umsetzten kann.
    Bei deinem Code verstehe ich nicht, wo und wie ich das entsprechende Rollover Imgae unterbringe. Darfst mir gerne noch einen Tipp geben.

    Danke jedenfalls Euch beiden. Ich bin schon einen großen Schritt weiter!

    VG devue
     
    #7      
  8. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Guten Morgen devue...

    dann fangen wir nochmal bei null an, und setzen an dem Lösungsansatz von soki an :)

    also, wir werden für jede Galerie eine Liste erstellen, und diese dann mit css so bearbeiten, das sie einen hover-effekt hat, und wie ene Gallerie wirkt.

    Zuerst der HTML-teil:

    HTML:
    1.  
    2. <ul class="galerie">
    3.   <li><a href="bildpfad" rel="gb_imageset[Wasserland]" title="Bildunterschrift" id="bild1"></a></li>
    4.   <li><a href="bildpfad" rel="gb_imageset[Wasserland]" title="Bildunterschrift" id="bild2"></a></li>
    5.   <li><a href="bildpfad" rel="gb_imageset[Wasserland]" title="Bildunterschrift" id="bild3"></a></li>
    6. </ul>
    7.  
    Damit wäre dann das HTML-Gerüst fertig, wenn auch noch nicht schick. Nun zum CSS:

    Code (Text):
    1.  
    2. ul .galerie {
    3.   list-style-type: none;   /* Damit es nicht mehr aussieht wie ne Liste */
    4. }
    5.  
    6. ul .galerie a {
    7.   display: block;
    8.   float: left;  /* wenn die bilder nebeneinander stehen sollen */
    9.   margin-right: 10px;  /* für den Abstand zwischen den Bildern */
    10.   width: 100px;  /*hier kommt die breite des thumbs rein */
    11.   height: 100px;  /* und hier die höhe */
    12. }
    13. #bild1 {
    14.   background: transparent url(thumpbildpfad) no-repeat;
    15. }
    16. #bild2 {
    17.   background: transparent url(thumpbildpfad) no-repeat;
    18. }
    19. #bild3 {
    20.   background: transparent url(thumpbildpfad) no-repeat;
    21. }
    22. #bild1:hover {
    23.   background: transparent url(thumpbildpfad) no-repeat; /* hier kommt das hover-bild rein */
    24. }
    25. #bild2:hover {
    26.    background: transparent url(thumpbildpfad) no-repeat;/* hier kommt das hover-bild rein */
    27. }
    28. #bild3:hover {
    29.    background: transparent url(thumpbildpfad) no-repeat;/* hier kommt das hover-bild rein */
    30. }
    31.  
    so, das wars dann eigentlich schon glaub ich. Achtung, ich habe es nicht getestet, aber musste so eigentlich funktionieren...

    Und das machst du dann dementsprechend mit allen Galerien.


    Gruß,
    Paric
     
    #8      
  9. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Hallo Paric,

    danke, dass du dir so eine Mühe machst aber im moment verwirrt mich dein neuer Code etwas, da es wieder neue Begriffe gibt, die ich nicht einordnen kann.
    Ich werde es mir nochmal genauer anschauen, wäre aber echt dankbar, wenn ich es erstmal mit meiner Tabellenstruktur hinbekommen könnte, wenigstens für 1 Image entsprechende Galerie einzubinden! Deshalb nochmal die Frage, wo müssen die Hinweise zu den anderen Bildern in der Galerie hin.
    Bei dieser einfachenVersion:
    Code (Text):
    1.  
    2. <a href="gallery/Wasserland/Wald.jpg" rel="gb_imageset[Wasserland]" title"Wald><a href="gallery/Wasserland/fire.jpg" rel="gb_imageset[Wasserland]" title="Fire"><a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser"><img src="images/WasserLand clear.jpg" width="306" height="207"></a>
    3.  
    habe 1Image (wasserland cclear) und beim draufklicken öffnet sich die Galerie, wo ich dann die Bilder Wald, Fire und Fahrwasser zu sehen bekomme (allerdings fängt die Zaählung bei 3 an, statt bei 1?)

    Bei dieser Version:
    Code (Text):
    1.  
    2. <a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)"><img src="images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0"></a>
    3.  
    habe ich dank deiner Hilfe endlich das Rolloverbild integriert, allerdings fehlen in der Galerie nich die anderen Bild - also Wald und Fire. Wo müssen die Zeilen dafür hin, damit es funktioniert.
    Es wäre sehr hilfreich, wenn es erstmal hier klappen würde...Um das Tabellengewurschtel kümmere ich mich dann danach. Ich versprech´s ;-)

    Was mir noch bei deinem Code aufgefallen ist, wenn ich es so mache wie in deinem HTML Code habe ich schon 3 verschiedene Vorschaubilder (bild1-bild3) - also auch 3 Vorlagen für entsprechende Galerien. Und damit wäre die Galeriebilder (entsprechende a href Bildpfad am Anfang verschiedenen Vorschaubildern zugeordnet. Ich möchte sie aber erstmal einem einzigen Bild zuordnen. s.o..
    Also, mit obigen Problem wäre mir schon sehr geholfen!!!

    Danke und schönen Tag
    devue
     
    #9      
  10. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Versuche es mal bitte so:

    HTML:
    1. <a href="gallery/Wasserland/fahrwasser.jpg" rel="gb_imageset[Wasserland]" title="Fahrwasser" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WasserLand','','images/WasserLand clear.jpg',1)">
    2.     <img src="http://www.psd-tutorials.de/forum/images/WasserLand soft.jpg" alt="hier geht es zur Galerie Wasserland" name="WasserLand" width="306" height="207" border="0">
    3. </a>
    4. <a href="gallery/Wasserland/Wald.jpg" rel="gb_imageset[Wasserland]" title="Wald"></a>
    5. <a href="gallery/Wasserland/fire.jpg" rel="gb_imageset[Wasserland]" title="fire"></a>
    ich weiss nicht ob es funktioniert, aber eigentlich müsste es das...
     
    #10      
  11. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Jaaaaaaaa...... es funktioniert! Und es ist sogar in der richtigen Reihenfolge!
    Tausend Dank, du hast mir sehr weiter geholfen. Damit komme ich bestimmt bald mal zum Ende der Webseite!
    Falls du mal in Berlin bist, hast du definitiv mindestens ein Bier o.ä. gut bei mir!

    Grüße aus Berlin
    devue
     
    #11      
  12. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    so ein Glück, ich wohn in Berlin :p
     
    #12      
  13. devue

    devue Noch nicht viel geschrieben

    Dabei seit:
    03.07.2011
    Beiträge:
    20
    Geschlecht:
    weiblich
    Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht
    AW: Hilfe!-Javascript Webgallerie Greybox funktionert mit Rollover Image nicht

    Na, da bin ich jetzt wohl in der Pflicht ;-)
     
    #13      
Seobility SEO Tool
x
×
×