kostenloser Webspace werbefrei: lima-city


Fotoansicht

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    rate

    rate hat kostenlosen Webspace.

    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. 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 :wink:
    http://visuallightbox.com/de/index.html
    Es gitb natürlich noch ganz viele im Web.
  4. 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

    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?

Über lima-city

Login zum Webhosting ohne Werbung!