• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fotogalerie thumbnails verlinken????

Status
Für weitere Antworten geschlossen.
S

sunny55

Neues Mitglied
Hallo,

ich bin gerade dabei ein beispiel für eine Fotogalerie nachzubauen. Da ich totaler xhtml und css Anfänger bin hoffe ich dadurch etwas in die Materie einzusteigen.
Es handelt sich um folgendes Tutorial:

How to Create a Photographic Gallery Using CSS - WebReference.com

Hat auch alles soweit geklappt. Stu Nichols beschreibt dabei in Step 8, dass er die Bilder als Thumbnails anlegt, um eine geeignete Größenvorschau zu erreichen. Ich habe meine Bilder also auch auf den vorgegebenen Größenwert angelegt. Was bei mir jedoch nicht funktioniert ist, dass beim überfahren eines Thumbnails das Bild in dem nebenliegenden Kasten gezeigt wird. Der ist bei mir leer und enthält nur den Bildtext.
Ich muss doch wohl irgendwie die Thumbnails verlinken auf die eigentlichen Bilder oder? Wie mache ich das?
Langt es nicht die Bilder in gewünschter Größe in einen Ordner zu speichern sondern muss ich irgendwie über das Grafikprogramm Thumbnails erzeugen lassen, die dann automatisch einen link enthalten?
Ich hoffe mir kann dabei jemand weiterhelfen

Danke für Eure ilfe
Gru? Sunny
 
longdesc ist kein Befehl, in HTML werden Attribute verwendet. Bei longdesc handelt es sich um den Verweis auf eine Langbeschreibung für eine Grafik. Das Attribut wird imho bisher nur von älteren Netscape und Firefox-Versionen unterstützt. Falls es auch im IE klappt ist es in meinen Augen eher Glück und hängt evtl. mit irgendwelchen JavaScripts zusammen die Dreamweaver zusätzlich einfügt.

SELFHTML: HTML/XHTML / Grafiken / Grafiken einbinden
 
Ok, das hat jetzt geklappt, ich habe den obigen Befehl rausgenommen und jetzt geht es auf einer seite. Auf einer zweiten Seite jedoch nicht. Warum? Ich stell mal den Code ein, vielleicht findet ja jemand einen Fehler. Ich sehe ihn nicht

Seite Fotogalerie (funktioniert)

html:


Code: 
   <div id="content">
           
        <h1 style="text-decoration:underline">Fotografie</h1>
        <div id="fotogalerie">
 <ul>
 <li>
      <a class="gallery slidea" href="#nogo">
          <span>
          <img src="css/Galerie/_DSC0043.jpg" alt="Architektur01" title="Architektur01"/>
          <br />
          Architektur01
          <br />
          <p>Fotografie  &copy; by Adrian Fischer   </p>
           </span>
      </a>
   </li>
   <li>
      <a class="gallery slideb" href="#nogo">
        <span>
          <img src="css/Galerie/_DSC0050.jpg" alt="Architektur02" title="Architektur02" />
          <br />
          Architektur02
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
   </li>
   <li>
      <a class="gallery slidec" href="#nogo">
        <span>
         <img src="css/Galerie/2002_1.jpg" alt="Briegel01" title="Briegel01" />
          <br />
          Briegel01
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
   </li>
   <li>
      <a class="gallery slided" href="#nogo">
        <span>
          <img src="css/Galerie/2002_2.jpg" lalt="Briegel02" title="Briegel02" />
          <br />
          Briegel02
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
   </li>
   <li>
      <a class="gallery slidee" href="#nogo">
      <span>
        <img src="css/Galerie/Baumfertig.jpg" alt="Baumfertig" title="Baumfertig" />
          <br />
          Baumfertig
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
   </li>
   <li>
      <a class="gallery slidef" href="#nogo">
        <span>
          <img src="css/Galerie/Kinderwagen.jpg" alt="Kinderwagen" title="Kinderwagen" />
          <br />
          Kinderwagen
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
   </li>
   <li>
      <a class="gallery slideg" href="#nogo">
        <span>
         <img src="css/Galerie/Werkstatt.jpg" alt="Werkstatt" title="Werkstatt" />
          <br />
          Werkstatt
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
    </li>
    <li>
      <a class="gallery slideh" href="#nogo">
        <span>
         <img src="css/Galerie/Marc01.jpg" alt="Marc01" title="Marc01" />
          <br />
          Kind
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
      </a>
    </li>
    <li>
      <a class="gallery slidei" href="#nogo">
        <span>
          <img src="css/Galerie/Marc02.jpg" alt="Marc02" title="Marc02" />
          <br />
          Kind2
          <br />
          Fotografie  &copy; by Adrian Fischer
        </span>
       </a>
    </li>
    
  </ul>
</div>
                  
        </div>
dazu css:

Code: 
/*Fotogalerie*/

/*Gesamter Kasten*/

#fotogalerie {
    position: relative;
    width: 630px;
    height: 410px;
    margin: 20px auto 0 auto;
    border: 1px solid #aaa;
    background: url() 75px 10px no-repeat;
    }
    
#fotogalerie ul{

    width: 198px;
    height: 430px;
    margin: 5px;
    float: right;
    list-style-type:none;
    
    }
    
#fotogalerie li {

    float: left;
    }
/* Border für thumbnails hover*/    
#fotogalerie a.gallery:hover {
     border: 1px solid #fff;
    }
    
/* Platz für hover Foto*/
#fotogalerie a.gallery:hover span {
    position: left;
    width: 398px;
    height: 398px;
    top: 5px;
    right: 20px;    
    color: #000;
     
    }
    
#fotogalerie a.gallery:hover img {
    
     border: 1px solid #000;
    float: left;
    margin-right: 5px;
    }
    

    
    
#fotogalerie a.gallery span{

    position:absolute;
    width: 1px;
    height: 1px;
    top: 5px;
    left: 5px;
    overflow: hidden;
    
    }
    
    

#fotogalerie a.gallery, #fotogalerie a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
#fotogalerie a.slidea {
    background:url(../css/thumbs/_DSC0043_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slideb {
    background:url(../css/thumbs/_DSC0050_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slidec {
    background:url(../css/thumbs/2002_1_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slided {
    background:url(../css/thumbs/2002_2_t.jpg); 
    height:60px; 
    width:93px;
    }

#fotogalerie a.slidee {
    background:url(../css/thumbs/Baumfertig_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slidef {
    background:url(../css/thumbs//Kinderwagen_t.jpg); 
    height:60px; 
    width:93px;
    }

#fotogalerie a.slideg {
    background:url(../css/thumbs/Werkstatt_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slideh {
    background:url(../css/thumbs/Marc01_t.jpg); 
    height:60px; 
    width:93px;
    }
#fotogalerie a.slidei {
    background:url(../css/thumbs/Marc02_t.jpg); 
    height:93px; 
    width:60px;
    }
Seite Layoutgalerie (funktioniert nicht!!!)
Hier werden nur die zwei Bilder in groß dargestellt. Aber nicht wie gewünscht, sondern irgendwo auf der seite und Thumbnails sieht man auch nicht. Es soll das gleiche Design wie bei der Fotogalerie oben haben, nur eben andere Bilder. Da es sich um zwei verschiedene Themenbereiche handelt möchte ich die Bilder auf zwei Seiten verteilen.

Code: 
  <div id="content">
           
                 
          
         
         <h1 style="text-decoration:underline">Printdesign</h1>
        <div id="layouts">
 <ul>
 <li>
      <a class="gallery slidea" href="#nogo">
          <span>
          <img src="css/Layouts/Aloha1.jpg" alt="Visitenkarte01" title="Visitenkarte01" />
          <br />
          Visitenkarte Vorne
          <br />
          <p>&copy; by Adrian Fischer   </p>
           </span>
      </a>
   </li>
   <li>
      <a class="gallery slideb" href="#nogo">
        <span>
          <img src="css/Layouts/Aloha2.jpg" alt="Visitenkarte02" title="Visitenkarte02" />
          <br />
          Visitenkarte R&uuml;ckseite
          <br />
          &copy; by Adrian Fischer
        </span>
      </a>
   </li>
       
  </ul>
</div>
         
            
        </div>
dazu css:

Code: 
      <div id="content">
           
                 
          
         
         <h1 style="text-decoration:underline">Printdesign</h1>
        <div id="layouts">
 <ul>
 <li>
      <a class="gallery slidea" href="#nogo">
          <span>
          <img src="css/Layouts/Aloha1.jpg" alt="Visitenkarte01" title="Visitenkarte01" />
          <br />
          Visitenkarte Vorne
          <br />
          <p>&copy; by Adrian Fischer   </p>
           </span>
      </a>
   </li>
   <li>
      <a class="gallery slideb" href="#nogo">
        <span>
          <img src="css/Layouts/Aloha2.jpg" alt="Visitenkarte02" title="Visitenkarte02" />
          <br />
          Visitenkarte R&uuml;ckseite
          <br />
          &copy; by Adrian Fischer
        </span>
      </a>
   </li>
       
  </ul>
</div>
         
            
        </div>
Danke
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben