Galerie an andere Position verschieben

2fersen · 15. Januar 2018

Hey Leute,

ich habe hier diesen fertigen Script für eine Galerie:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
   <title>Galerie 10 ohne Java Script mit transition:left</title>
   
   <meta http-equiv="Content-Style-Type" content="text/css">   

<style type="text/css">a

* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
}

html,body {
 height:10000px;
 width:100%; 
}

#gal {
 margin:30px;
 width:4000px;
 overflow:hidden;
 border:3px double #aaa;
}
#gal #ausgabe {
 width:2000px;
 float:left;
 position:relative;left:0;
 -moz-transition: 1s;
 -o-transition: 1s;
 -webkit-transition: 1s;
}

#gal a {
 position:relative;
 float:left;
}


#gal a + a + a + a + a img {
 margin-right: 0;
 width:80px;
 height:59px;
}
#gal img {
width:400px;
float:left;
 
}

#gal a img {
 width:79px;
 margin: 0 1px 1px 0;
}

#gal a:hover:before , #gal a:focus:before {
 content:"";
 position:absolute;
 top:0;left:0;right:1px;bottom:1px;
 background:rgba(255,255,255,.3);
}
}
#gal a:hover ~ #ausgabe , #gal a:focus ~ #ausgabe {
 left:0;
}

#gal a + a:hover ~ #ausgabe , #gal a + a:focus ~ #ausgabe {
left:-400px;
}

#gal a + a + a:hover ~ #ausgabe , #gal a + a + a:focus ~ #ausgabe {
 position:relative;
left:-800px;
}

#gal a + a + a + a:hover ~ #ausgabe , #gal a + a + a + a:focus ~ #ausgabe {
 position:relative;
left:-1200px;
}

#gal a +  a + a + a + a:hover ~ #ausgabe , #gal a +  a + a + a + a:focus ~ #ausgabe {
 position:relative;
left:-1600px;
}


</style>

</head>
<body>
<h1>Galerie 10 ohne Java Script mit transition:left</h1>

<div id="gal">
  <a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a2"><img src="./Galerie 10 ohne Java Script mit transition_left_files/loewe.jpg" alt="bild1"> </a>
  <a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a2"><img src="./Galerie 10 ohne Java Script mit transition_left_files/zebra.jpg" alt="bild2"> </a>
  <a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a3"><img src="./Galerie 10 ohne Java Script mit transition_left_files/ente.jpg" alt="bild3"> </a>
  <a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a4"><img src="./Galerie 10 ohne Java Script mit transition_left_files/eisbaer.jpg" alt="bild4"> </a>
  <a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a5"><img src="./Galerie 10 ohne Java Script mit transition_left_files/brunnen1.jpg" alt="bild5"> </a>

 <div id="ausgabe">
        <img src="./Galerie 10 ohne Java Script mit transition_left_files/loewe.jpg" alt="bild1">
        <img src="./Galerie 10 ohne Java Script mit transition_left_files/zebra.jpg" alt="bild2">
        <img src="./Galerie 10 ohne Java Script mit transition_left_files/ente.jpg" alt="bild3">
        <img src="./Galerie 10 ohne Java Script mit transition_left_files/eisbaer.jpg" alt="bild4">
        <img src="./Galerie 10 ohne Java Script mit transition_left_files/brunnen1.jpg" alt="bild5">
   </div>
</div>
</body></html>

Alles anzeigen

Wie kann ich diese an eine andere Stelle positionieren?

Freue mich auf eure Antworten!

basti1012 · 15. Januar 2018

was meinst du mit andere stelle positionieren. das macht man eigentlich über die css

Sempervivum · 15. Januar 2018

Zitat

Wie kann ich diese an eine andere Stelle positionieren?

Wie meinst Du das? In der Seite gibt es nur die Galerie. Du kannst sie zentriert, links oben, links mittig etc. positionieren. Ist es das, was Du meinst?

MrMurphy · 16. Januar 2018

Hallo

Willst du diese Bildergalerie nachbauen:

http://www.gipspferd.de/CSS-Ex…lerie/galerie10/index.htm

Gruss

MrMurphy

basti1012 · 16. Januar 2018

Hast recht ,kommt das gleiche raus

* Link entfernt , weil existiert nicht mehr *

EDIT . Aber er schrieb ja ,er hat dieses fertiges Script . Ich sollte erst lesen und dann schreiben

2fersen · 16. Januar 2018

basti1012 Sempervivum

Ich möchte das die Galere hier rechts neben der Artikelbeschreibung steht:

https://jsfiddle.net/2fersen/68yo8pzc/

MrMurphy Ja ich hab mir den Code für die Galerie stibitzt

Freue mich auf eure Antworten!

basti1012 · 16. Januar 2018

Meinst du so

* Link entfernt , weil existiert nicht mehr *

Sempervivum · 16. Januar 2018

Ich würde ja eher eine Galerie empfehlen, die durch Klick bedient wird, damit sie auch auf Touch-Geräten funktioniert. Diese habe ich früher mal gemacht:

Code

<style>
        .thumbs {
            display: inline-block;
            width: 50px;
            vertical-align: top;
        }

            .thumbs img {
                width: 50px;
                height: auto;
            }

        .mainimg {
            position: relative;
            display: inline-block;
            height: 400px;
            width: calc(100% - 50px);
        }

            .mainimg input {
                display: none;
            }

            .mainimg figure {
                position: absolute;
                width: 100%;
                height: auto;
                left: 0;
                top: 0;
                opacity: 0;
                transition: opacity ease 3s;
            }
            .mainimg figure img {
                width: 70%;
                height: auto;
                float: left;
            }
            .mainimg figure figcaption {
                display: inline;
            }

            .mainimg input:checked + figure {
                display: block;
                opacity: 1;
            }
    </style>
    <div class="thumbs">
        <label for="img1"><img src="images/dia0.jpg" /></label>
        <label for="img2"><img src="images/dia1.jpg" /></label>
        <label for="img3"><img src="images/dia2.jpg" /></label>
    </div><div class="mainimg">
        <input type="radio" name="radio-mainimg" id="img1" />
        <figure><img src="images/dia0.jpg" /><figcaption>Caption for image 1</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img2" checked />
        <figure><img src="images/dia1.jpg" /><figcaption>Caption for image 2</figcaption></figure>
        <input type="radio" name="radio-mainimg" id="img3" />
        <figure><img src="images/dia2.jpg" /><figcaption>Caption for image 3</figcaption></figure>
    </div>

Alles anzeigen

Edit: Ich sehe, dass die Galerie von Gipspferd das auch realisiert, mit :focus. Nehme alles zurück.

2fersen · 17. Januar 2018

basti1012 Vielen lieben Dank! Wärst du vielleicht noch so gut die Galerie innerhalb der braunen Box zu zentrieren und vielleicht den Rahmen um die Galerie zu entfernen?

Sempervivum Trotzdem vielen Dank! schaue mir auch noch deine Galerie an!

Liebe Grüße!

basti1012 · 17. Januar 2018

Den border machst du so weg

Code

border:3px double #aaa;

einfach die Zeile löschen .

Also mit zentriert weiß ich nicht was du genau meinst . Wahrscheinlich das es über den Rand hinweg geht, wenn du das Fenster kleiner machst ? weil ansonsten ist es ja mittig, wenn es groß genug ist .

Habe mal versucht das responsiv zu machen. ist mir halbwegs geglückt ,aber vielleicht kann da ja mal wer anders gucken, ob er das besser hinbekommt als ich ,weil ist noch nicht optimal.

* Link entfernt , weil existiert nicht mehr *

djheke · 17. Januar 2018

Du brauchst doch nur die Pixelangaben durch Prozentangaben ersetzen. Dann funktioniert's.

basti1012 · 17. Januar 2018

Zitat von djheke

Du brauchst doch nur die Pixelangaben durch Prozentangaben ersetzen. Dann funktioniert's.

Ja siehst du ,das ist mein problem ,ich wurstel immer mit "VW" rum und so .klappt zwar auch ist aber wohl umständlicher.

Aber dafür gibt es ja leute wie dich die mehr ahnung haben. Dann muss man alle "PX" werte in "%" umtauschen ?

basti1012 · 17. Januar 2018

also mit prozent bekomme ich es überhaupt nicht hin

2fersen · 17. Januar 2018

djheke und basti1012 Mit Prozent bekomme ich es irgendwie nicht wirklich hin.. Könntest du mir da schnell zur Hand gehen?

Könnte mir einer von euch helfen vielleicht bei den "Details" einen dicken Rand um die Tabelle setzen?

Code

table, caption{
border:30px double #aaa;
}

Damit funktioniert es leider nicht.. Freue mich auf eure Antworten!

2fersen · 17. Januar 2018

Uuuund wie kann ich die unteren Kästen umfärben ohne den großen oberen auch mit zu verfärben?

basti1012 · 17. Januar 2018

Meinst du so

* Link entfernt , weil existiert nicht mehr *

Die Farben musst du natürlich noch ändern. Ich übertreibe immer gerne mit der Farbwahl.

djheke · 18. Januar 2018

Zitat von basti1012

also mit prozent bekomme ich es überhaupt nicht hin

HTML

<!DOCTYPE html>
<html lang="de">
<head>


<title>Galerie </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">


* {
margin:0;
padding:0;
list-style:none;
border:none;
outline:none;
box-sizing:border-box;
}


body {
padding:10px;
float:left;
background:#fff;
}


header {
padding:10px;
margin:10px 0;
background:#eee;
}




#gal {
float:left;
height:auto;
overflow:hidden;
border:3px double #aaa;
}
#gal #ausgabe {
width:500%;
float:left;
position:relative;left:0;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}




#gal a {
position:relative;
float:left;
width:25%;
}




#gal img {
float:left;
width:100%;
}


#ausgabe img {
width:20%;
float:left;


}


#gal a img {
padding:0 0 1px 1px;
}
#gal a:focus:before {
content:"";
position:absolute;
top:0;left:0;right:1px;bottom:1px;
background:rgba(255,255,255,.3);
}






#gal a:focus ~ #ausgabe {
left:-100%;
}


#gal a + a:focus ~ #ausgabe {
left:-200%;
}


#gal a + a + a:focus ~ #ausgabe {
left:-300%;
}


#gal a +  a + a + a:focus ~ #ausgabe {
left:-400%
}






</style>


</head>
<body>


<header><h1>Webseite</h1></header>
<div id="content">


<div id="gal">
<a tabindex="0" href="#a2"><img src="zebra.jpg" alt="bild2"> </a>
<a tabindex="0" href="#a3"><img src="ente.jpg" alt="bild3"> </a>
<a tabindex="0" href="#a4"><img src="eisbaer.jpg" alt="bild4"> </a>
<a tabindex="0" href="#a5"><img src="brunnen1.jpg" alt="bild5"> </a>


<div id="ausgabe">
<img src="loewe.jpg" alt="bild1">
<img src="zebra.jpg" alt="bild2">
<img src="ente.jpg" alt="bild3">
<img src="eisbaer.jpg" alt="bild4">
<img src="brunnen1.jpg" alt="bild5">
</div>
</div>
</div>


</body>
</html>

Alles anzeigen

basti1012 · 18. Januar 2018

Zeile 59 muss width:20%; sein aber ansonsten klappt es gut mit den Prozenten so.

* Link entfernt , weil existiert nicht mehr *

Hier die geänderte Version mit Prozenten, so wird das jetzt auch responsiv dargestellt und passt sich der größte des Browserfenster an

2fersen · 18. Januar 2018

basti1012

Top dank dir! Doch irgendwie funktioniert die Galerie jetzt nicht mehr wirklich, ich denke da muss man auch noch irgendwelche Prozent eingaben tätigen. Außerdem verfärbt sich irgendwie die Galerie mit den Kästchen unten .. Kannst du mir des schnell auch noch beheben?

Zitat

https://jsfiddle.net/2fersen/m3jothz1/

Doch was glaube ich schöner aussehen würde, wäre wenn die Ecken leicht abgerundet wären. Sollte mit diesem Befehl funktionieren:

Code

#mywrapper table{
border-radius: 20px Black;
}

Doch damit funktioniert es leider nicht .. kannst du mir damit vielleicht noch schnell helfen..

Außerdem denke ich wäre ein Rand um das ganze Dokument schön, doch das bekomme ich auch nicht hin..

Code

#mywrappper body,html {
 margin:0;
 padding:0;
height: 100%;}
    
#mywrapper body {
    border-left: 5x solid black;
    border-right: 5x solid black;
    border-top: 5x solid black;
    border-bottom: 5x solid black;
    }

Alles anzeigen

basti1012 · 18. Januar 2018

https://jsfiddle.net/basti1012/m3jothz1/1/ ICH HOFFE DAS ICH NIX VERGESSEN HABE

Galerie an andere Position verschieben

Jetzt mitmachen!

Teilen

Tags