CSS Sliding Gallery - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

CSS Sliding Gallery

Scripte > Bildergallerien


Ein Slide-Photo-Albums auf reiner CSS3-Basis. (UTF-8)

CSS

Hier einmal eine ganz andere Form für eine Fotopräsentation. Dieses Script verwendet kein JavaScript und auch kein Flasch. Es wird ausschließlich über CSS gesteuert.
Gezeigt wird hier eine horizontale und vertikale Darstellung.
Für die Einbindung
sind 2 Varianten erläutert. Sollte dieses Script als Gleiches auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
Auch als eine Art Menü könnte diese Photo-Slide-Gallery fungieren.

In der Zip-Datei befindet sich ein Verzeichnis "
cs_sliding-gallery", das so übernommen werden kann. Es befinden sich zwei Index-Dateien für die horizontale und vertikale Einbindung im Verzeichnis. Die CSS-Datei steuert beide Varianten.
Die Anpassungen der Verlinkungen erfolgen in der Datei "index_hor.html" bzw. "index_ver.html". Die Anpassung/Änderung des Styles in der Datei "gallery_style.css" im Hauptverzeichnis.

Sliding Gallery
Sliding Gallery


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_sliding-gallery/gallery_style.css" />



Variante 1


Code für das HTML-Objekt:

<div>
<ul id="galleryh">
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_6.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="cs_sliding-gallery/img/img_7.jpg" alt="#7" title="#7" /></a></li>
</ul>
</div>


Hinweis:
<ul id="galleryh"> - für horizontale Präsentation
<ul id="gallery">   - für vertikale Präsentation



Variante 2


Code für das HTML-Objekt:

<? include "cs_sliding-gallery/index_hor.html"; ?>

bzw.

<? include "cs_sliding-gallery/index_ver.html"; ?>


Code der CSS-Datei (gallery_style.css):


#holder {margin:20px auto;}
#gallery
{
 padding:0;
 margin:0 auto 5em auto;
 list-style-type:none;
 overflow:hidden;
 width:320px;
 height:425px;
 border:1px solid #888;
 background:#fff url(img/img_back.gif);
 
}
#gallery li
{
 float:left;
 
}
#gallery li a
{
 display:block;
 height:30px;
 width:320px;
 float:left;
 text-decoration:none;
 border-bottom:1px solid #fff;
 cursor:default;
 
}
#gallery li a img
{
 width:320px;
 height:30px;
 border:0;
 
}
#gallery li a:hover
{
 background:#eee;
 height:240px;
 
}
#gallery li a:hover img
{
 height:240px;
 
}

#galleryh
{
 padding:0;
 margin:0 auto 5em auto;
 list-style-type:none;
 overflow:hidden;
 width:495px;
 height:240px;
 border:1px solid #888;
 background:#fff url(img/img_backh.gif);
 
}
#galleryh li
{
 float:left;
 
}
#galleryh li a
{
 display:block;
 height:240px;
 width:28px;
 float:left;
 text-decoration:none;
 border-right:1px solid #fff;
 cursor:default;
 
}
#galleryh li a img
{
 width:28px;
 height:240px;
 border:0;
 
}
#galleryh li a:hover
{
 background:#eee;
 width:320px;
 
}
#galleryh li a:hover img
{
 width:320px;
 
}


#galleryie
{
 padding:0;
 margin:0 auto;
 list-style-type:none;
 overflow:hidden;
 width:495px;
 height:240px;
 border:1px solid #888;
 background:#fff url(img/img_backh.gif);
 
}
#galleryie li
{
 float:left;
 
}
#galleryie li a
{
 display:block;
 height:240px;
 width:28px;
 overflow:hidden;
 float:left;
 text-decoration:none;
 border-right:1px solid #fff;
 cursor:default;
 
}
#galleryie li a
{img border:0;}
#galleryie li a:hover
{
 background:#eee;
 width:320px;

 
}

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 13 Online
 » 175 Heute
 » 175 Woche
 » 3930 Monat
 » 29754 Jahr
 » 276332 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü