Hallo,
ich möchte eine kleine Slideshow auf der Startseite in den Shop2 bauen. Dazu möchte ich jQuery benutzen. Das funktioniert auch so weit schon wie ich mir das vorstelle. Jetzt habe ich allerdings noch 2 Probleme.
Wenn der Besucher Javascript deaktiviert hat, werden alle Bilder untereinander angezeigt. Das sieht natürlich sehr blöd aus. Wie setze ich es um, dass dann ein Bild per Zufallsprinzip angezeigt wird?
Des weiteren, wie baue ich das Script am besten ein? Nutze ich nen iFrame oder binde ich das direkt ins Template ein?
Hier der Code:
ich möchte eine kleine Slideshow auf der Startseite in den Shop2 bauen. Dazu möchte ich jQuery benutzen. Das funktioniert auch so weit schon wie ich mir das vorstelle. Jetzt habe ich allerdings noch 2 Probleme.
Wenn der Besucher Javascript deaktiviert hat, werden alle Bilder untereinander angezeigt. Das sieht natürlich sehr blöd aus. Wie setze ich es um, dass dann ein Bild per Zufallsprinzip angezeigt wird?
Des weiteren, wie baue ich das Script am besten ein? Nutze ich nen iFrame oder binde ich das direkt ins Template ein?
Hier der Code:
Code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>AnythingSlider</title>
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script> <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script type="text/javascript" src="js/jquery.anythingslider.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('#slider1').anythingSlider({
startPanel : 0, // This sets the initial panel
autoPlay : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
startStopped : false, // If autoPlay is on, this can force it to start stopped
width : 500, // Override the default CSS width
height : 250, // if resizeContent is false, this is the default height if panel size is not defined
// toggleControls : true, // if true, then slide in controls on hover and slider change, hide @ other times
theme : 'default',
buildArrows : false, // If true, builds the forwards and backwards buttons
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
// Report Events to console
$('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
// show object ID + event (e.g. "slider1: slide_begin")
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
$('#status').text(txt);
if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
});
});
</script>
</head>
<div id="">
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li><a href="http://xxxxx.de">
<img src="images/slide-civil-1.jpg" width="500" height="250 alt="" /></li>
<li><a href="http://xxxxx.de">
<img src="images/slide-env-1.jpg" width="500" height="250 alt="" /></li>
<li><a href="http://xxxxx.de">
<img src="images/rahmen1.png" width="500" height="250 alt="" /></li>
<li><a href="http://xxxxx.de">
<img src="images/slide-civil-1.jpg" width="500" height="250 alt="" /></li>
<li><a href="http://xxxxx.de">
<img src="images/slide-env-1.jpg" width="500" height="250 alt="" /></li>
<li><a href="http://xxxxx.de">
<img src="images/slide-civil-2.jpg" width="500" height="250 alt="" /></li>
</ul> <!-- END AnythingSlider #1 -->
</div>
</body>
</html>