kostenloser Webspace werbefrei: lima-city

Fotoansicht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   rate

   rate hat kostenlosen Webspace.

   22:10, 9.8.2011

   Hallo,
   auf meiner Webseite brauche ich viele Fotos, und wären manchmal auch so gross wie der ganze Bildschirm. Verkleinern kann ich sie natürlich, aber man erkennt dann vieles nicht. Ich suche eine gute, aber SELBSTGEMACHTE Lösung, um Fotos schön zu vergrössern.
   
   Keine fertigen scripts und so einfach wie möglich. Einfach eine Box die man per Link öffnen und per Link schliessen kann.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. jocko

   

   jocko hat kostenlosen Webspace.

   8:23, 10.8.2011

   Nun, du kannst die Bilder mit dem Link versehen und wenn dann draugeklickt wird, wird das Bild in voller Grösse angezeigt. Mit einem weiteren Klick auf den Zurück-Button wird wieder die Seite angezeigt.
   
   Nur das entspricht deinen Anforderungen.
   
   Wenn du eine selbstgemachte Lösung möchtest, musst du dir wohl JavaScript erlernen.
   Aber nimm doch einfach fertige Scripts.
   Hier mal ein Link, kannst ja immer noch selber entscheiden
   http://visuallightbox.com/de/index.html
   Es gitb natürlich noch ganz viele im Web.

4. crueldeath

   crueldeath hat kostenlosen Webspace.

   11:57, 10.8.2011

   Du willst zwar nicht fertiges, aber schau dir doch trotzdem mal sowas an:
   
   http://www.slideshowbox.com/
   
   Ich finde es ist eine echt elegante Lösung, sieht gut aus und ist anpassbar.
   
   edit by tct:
   Link angepasst
   
   Beitrag zuletzt geändert: 10.8.2011 17:25:37 von tct

5. h**s

   17:10, 23.8.2011

   also das wäre zb ein ganz ganz einfacher code (platzierst du am besten im head-bereich deiner html-datei) um die verkleinerten bilder bei einem klick gross auf der seite anzeigen zu lassen ohne einen neuen seitenaufruf zu benutzen:
   

   <script type="text/javascript">
   	function galerie(obj) {
   		var halter = document.getElementById('galerie');
   		if(obj!=0) {
   			halter.innerHTML = '<br /><br /><br /><a href="javascript:galerie(0)">zum schliessen klicken<br /><img src="'+obj.src+'" /></a><br />';
   			halter.style.display = 'block';
   		}else {
   			halter.innerHTML = '';
   			halter.style.display = 'none';
   		}
   	}
   </script>

   
   
   
   benötigt wird ein element in dem die bilder dann gross angezeigt werden:
   

   <div id="galerie"></div>

   
   
   
   es bietet sich an dieses element als "overlay" zu formatieren, zb in css so:
   

   <style type="text/css">
       html, body {
           width:100%;
           height:100%;
           margin:0px;
           padding:0px;
       }
       #galerie {
           width:100%;
           height:100%;
           background-image:url(../alpha.png);
           display:none;
           position:absolute;
           top:0px;
           left:0px;
       }
       #galerie a {
           color:#DDD;
           font-size:12px;
           text-decoration:none;
       }
       #galerie a:hover {
           color:#FFF;
           font-size:12px;
           text-decoration:none;
       }
       #galerie img {
           width:450px;
           height:450px;
       }
   </style>

   
   
   
   die einzelnen bilder brauchen dann nur einen link der das script aufruft:
   

   <img class="galeriebild" src="ichbineinbild.jpg" alt="" onclick="galerie(this)" />

   
   
   
   Die class-angabe hab ich jetzt nur zur schöneren ansicht gemacht:
   

   <style type="text/css">
       .galeriebild {
           width:140px;
           height:140px;
           margin:5px;
       }
       .galeriebild:hover {
           width:150px;
           height:150px;
           margin:0px;
       }
   </style>

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?