jQuery Image Show - Website X5 Hilfe - Die Helpsite

Website hundertprozent CO2 neutral mit Host Europe

Hauptmenü

Startseite
Übersicht/Suchen
Virtual Website X5
WSX5 Tools
Scripte
- Bildobjekte
- Bildergallerien
- Menü Navigation
- Button Navigation
- Listen Navigation
- Form-Mailer
- Multimedia
- Text- & Tabellenobjekte
  - CMS Editor
  - Texte mit Schatten
- Tools
- Attachment
- Protection
- Snipped
Tutorials
- Website X5
- Fremdscripte
  - Gästebuch Hinnendahl
- Settings
  - JavaScript aktivieren
Übersichten
- HTML & Co.
- Microsoft DOS
- Microsoft Shortcuts
- Microsoft Zeichensätze
Download
Template
Online-Tools
Imagehost
Links
Testebene
- Forum-Test
- Member-Test
Gästebuch
Kontakt
Impressum

jQuery Image Show

Scripte > Bildergallerien

Eine Bildergallerie als Slide-Show mit jQuery. (UTF-8)

Hier eine Bildergallery mit jQuery. Beim Klick auf das Bild öffnet sich eine zuvor eingestellte Seite ider ein Link zum vergrößertem Bild. Die Gallerie stoppt sobald die Maus auf dem Image liegt.
Die Größe der Gallerie kann selbst bestimmt und weiter ausgebaut werden. Dazu muss der HTML-Code nur entsprechend ergänzt werden.
In der Zip-Datei befindet ein Verzeichnis "jq_image-show", das so übernommen werden kann und auf den Server kopiert wird. Die Anpassung der Einträge erfolgen dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Nur erfahrene Nutzer sollten Änderungen an den CSS-Definitionen vornehmen.
Achtung: Die Ausrichtung der Zelle des Objekts muss auf "Oben" und "Links" eingestellt werden.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="jq_image-show/slide_style.css" />
<script src="jq_image-show/jquery.min.js"></script>
<script src="jq_image-show/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
  preload: true,
  preloadImage: 'jq_image-show/img/loading.gif',
  generatePagination: true,
  play: 5000,
  pause: 2500,
  hoverPause: true,
  effect: 'fade',
  crossfade: true,
  slideSpeed: 350,
  fadeSpeed: 500,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>

Code für das HTML-Objekt:

Code der CSS-Datei (slide_style.css):

#container {
width:450px;
padding:0;
margin:0 auto;
position:relative;
z-index:0;
}

#frame {
position:absolute;
z-index:0;
width:450px;
height:341px;
top:-1px;
left:-25px;
}

#example {
width:450px;
height:350px;
position:relative;
}

/*
Slideshow style
*/

#slides {
position:absolute;
top:-1px;
left:0;
z-index:100;
}

.slides_container {
width:450px;
height:330px;
overflow:hidden;
position:relative;
display:none;
}

#slides .slide {
padding:20px;
width:450px;
height:230px;
display:block;
}

/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:127px;
left:-27px;
width:24px;
height:43px;
display:block;
z-index:101;
}

#slides .next {
left:453px;
}

/*
Pagination
*/

.pagination {
margin:0px auto 0;
width:250px;
}

.pagination li {
float:left;
margin:0 1px;
list-style:none;
}

.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}

.pagination li.current a {
background-position:0 -12px;
}

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)

Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *