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

Float Bilder(img) höhenversatz.

M

myoddo

Mitglied
Hallo,
nachdem ich die Nacht durchgeackert habe, verliere ich so langsam den Überblick.
Auf der Seite könnt ihr 1:1 nachschauen.
Freudenmann GmbH Gastronomie-Innenausbau-Kältetechnik-Thekenbau
Ich möchte die Bilder in der Gallery (grüner background)
natürlich oben gleichhoch haben.
Mache ich die

Code: 
.pacco_gallery {
width: 150px; /*breite der gallery*/}

noch breiter (sodass 3 Bilder nebeneinander sind)
Wird die 3. Reihe noch einmal nach unten gesetzt.


Eventuell findet ihr die Lösung.
Glaube ich habe mich auch etwas verrannt.
Danke
 
Werbung:
Ich sehe schon, wo du hinwillst. Wenn man rechts über ein kleines Bild hovert, soll links dessen großes Pendant erscheinen, und dafür setzt du dann zwei Bilder in denselben Anker. Das kann nichts geben.

Du brauchst zwei unterschiedliche Container. In den linken werden die großen Bilder geladen und im rechten steht die Gallerie. Die Gallerie sollte so breit sein, wie zwei Bilder zzgl. Abständen zum Rand benötigen. Die Bilder innerhab der Gallerie werden lediglich über Margin positioniert, ohne Listen oder Anker. Zur Vereinfachung würde ich auch deren Width und Height per CSS deklarieren.

Den Hover-Effekt realisiert man über Eventhandler in Javascript. Dafür sollten die jeweiligen Bilderpaare korrespondierende Namen tragen, bsw. beamer_1.jpg und beamer_2.jpg. Von der Programmlogik her sieht es so aus, dass wenn der Cursor über ein Bild hovert, dessen src Attribut in einer Variablen aufgefangen wird. Der String wird manipuliert (1 in 2) und anschließend als Image in den linken Container geladen.

/edit: Theoretisch kann man natürlich auch für beide Container das selbe Bild verwenden, es rechts in der Verkleinerung und links im Originalformat anzeigen.
 
Werbung:
myoddo schrieb:
Geht es auch ohne Javascript.
Habe davon "noch" NULL" Ahnung !
Zum Vergrößern anklicken....

Theoretisch ginge es auch mit reinem CSS, wäre aber ungleich komplizierter, weil Gallerie und großes Bild visuell zwei unterschiedliche Elemente darstellen, die im Quellcode zu einem einzigen zusammgefasst werden müssten.

Baue mal deine rechte Gallerie so, wie ich es dir gesagt habe, und ich schreibe dir dann das JavaScript dazu.
 
So in etwa meine ich das. Ich habe mir dazu mal zwei Bilder von deiner Seite kopiert und umbenannt. Hier wird beim Mouseover jeweils das große Pendant in den linken Container geladen, und beim Mouseout springt es wieder zurück. Wenn man den rechten Container in seiner Breite entsprechend begrenzt, müssen die kleinen Images noch nicht mal gefloatet werden.

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Bilderwechsel</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
    #preview, #galerie {
        height: 300px;
        float: left;
    }
    #preview img {
        width: 400px;
    }
    #galerie {
        width: 120px;
        background: green;
        margin-left: 50px;
    }
    #galerie img {
        height: 50px;
        width: 50px;
        margin-left: 5px;
        margin-top: 10px;
        cursor: pointer;
   }
</style>
</head>
<body>
    <div id="preview">
        <img src="wand-2.png" alt="" />
    </div>
    <div id="galerie">
        <img src="wand-1.png" alt="" />
        <img src="theke-1.png" alt="" />
    </div>
    <script>
        $(document).ready(function() {
            $('#galerie img').mouseover(function() {
                smallPic = $(this).attr('src');
                largePic = smallPic.slice(0,-5) + '2.png';
                $('#preview img').attr('src', largePic);
            })
            $('#galerie img').mouseout(function() {
                $('#preview img').attr('src', 'wand-2.png');
            });
        });
    </script>
</body>
</html>
 
Ist es so gewollt, dass die vergrößerten Hoverbilder über der Navigation liegen?
Wen nicht dann.
1. #wrapper um ca. 100px verbreitern (820px)
2. #pacco_album um ca 100px verbreitern (670px)
3. .pacco_galerie { width:132px für 2 Reihen oder 198px für 3 reihen }
4.
Code: 
.pacco_gallery li   {
 float:left;
 padding:1px;
 margin:1px;
}

Dann sollte alles gut funktionieren. Offline war jedenfalls alles schicki.
 
Werbung:
Bezüglich der PM's von gestern abend:

Das Problem ergibt sich wahrscheinlich aus dem Zusammenspiel von Motools und jQuery und ließe sich eventuell mit jQuery noConflict() lösen. Ich habe nachfolgend das Ganze aber mal in purem JavaScript geschrieben.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Bilderwechsel</title>
<meta charset="utf-8" />
</head>
<body>
    <div id="preview">
        <img id="previewpic" src="wand-2.png" alt="" />
    </div>
    <div id="galerie">
        <img src="wand-1.png" alt="" onmouseover="changeImg(this.getAttribute('src'));" />
        <img src="theke-1.png" alt="" onmouseover="changeImg(this.getAttribute('src'));" />
    </div>
    <script>
    function changeImg (name) {
        var smallPic = name;
        var largePic = smallPic.slice(0,-5) + '2.png'
        document.getElementById('previewpic').src = largePic;
    }
    </script>
</body>
</html>

Dabei fiel mir dann gleich wieder ein, warum ich von vanilla JS zu jQuery umgestiegen bin.

Mal eine Frage an die JavaScript-Experten hier: Existiert eine elegantere Methode, beim onmouseover das source Attribut des aktuellen Images als String in eine Variable zu schreiben? Die umständliche Übergabe per Funktionsparameter gefällt mir nicht. Ein this.getAttribute('src') innerhalb der Funktion liefert aber immer ein undefined zurück.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben