Ich beginne zunächst mit dem Slider auf der html Seite. Dieser funktioniert hervorragend, solange dieser nicht im Shop direkt verbaut ist.
Hier der Link zum funktionierenden Slider: http://www.engelis-naturshop.ch/test2/
Und so sieht dieser aktuell in meinem Testshop aus: http://www.engelis-naturshop.ch/test
Interessant ist, dass das Bildkarusell welches ich nahezu identisch eingebaut habe, im Gegensatz zum Slider funktioniert.
Hier also kurz der Einbaubeschrieb und Code auf meiner normalen html Seite:
index.html (Hauptcode)
Code: Alles auswählen
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/style.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/sequence.jquery-min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<div id="wrapper"> <!-- Main Navigation -->
<!-- Sequence Slider --><script type="text/javascript">
var preloader = ($.browser.msie) ? false : true ;
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 5000,
nextButton: true,
prevButton: true,
preloader: preloader,
animateStartingFrameIn: true,
transitionThreshold: 500,
fallback: {
theme: "slide",
speed: 500
}
};
var sequence = $("#sequence").sequence(options).data("sequence");
sequence.afterLoaded = function(){
$(".info").css('display','block');
$("#sequence").hover(
function() {
$(".prev, .next").stop().animate({opacity:0.7},300);
},
function() {
$(".prev, .next").stop().animate({opacity:0},300);
}
);
$(".prev, .next").hover(
function() {
$(this).stop().animate({opacity:1},200);
},
function() {
$(this).stop().animate({opacity:0.7},200);
}
);
}
})
</script>
<div class="row no_bm">
<div id="slider_holder" class="sixteen columns">
<div id="sequence">
<div class="prev" ><span></span></div>
<div class="next" ><span></span></div>
<ul>
<!-- Layer 1 -->
<li>
<div class="info animate-in">
<h2>Clean Design</h2>
<h3>Clear Message</h3>
<p>Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring</p>
<p><a class="link" href="services.html">View Services »</a>
</div>
<img class="slider_bgr animate-in" src="images/1.jpg"/>
<img class="slider_img animate-in" src="images/1_1.png"/>
</li>
<!-- Layer 2 -->
<li>
<div class="info">
<h2>Slick & Smart</h2>
<h3>Rich Admin Options</h3>
<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
<p><a class="link" href="portfolio.html">View Portfolio »</a>
</div>
<img class="slider_bgr" src="images/2.jpg"/>
<img class="slider_img" src="images/2_2.png"/>
</li>
<!-- Layer 3 -->
<li>
<div class="info">
<h2>White ain't bad</h2>
<h3>Fully Customizable</h3>
<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
<p><a class="link" href="blog.html">Read Our Blog »</a>
</div>
<img class="slider_img" src="images/3.jpg"/>
</li>
</ul>
</div>
</div>
<!-- Sequence Slider::END-->
</div>
</div>
/img (Bildordner)
/css (Stylesheets)
style.css
skeleton.css
/js (Javascript Files)
sequence.jquery-min.js
jquery.flexslider-min.js
jquery-1.7.2.min.js
Ok soweit der funktionierende Slider ausserhalb des Shops
Und so habe ich diesen derzeit im Shop verbaut:
In der main_content.html habe ich den code wie folgt integriert:
Code: Alles auswählen
{config_load file="$language/lang_$language.conf" section="index"}
<!-- BEGIN Slider -->
{literal}<script type="text/javascript">
var preloader = ($.browser.msie) ? false : true ;
$(document).ready(function() {
var options = {
autoPlay: true,
autoPlayDelay: 5000,
nextButton: true,
prevButton: true,
preloader: preloader,
animateStartingFrameIn: true,
transitionThreshold: 500,
fallback: {
theme: "slide",
speed: 500
}
};
var sequence = $("#sequence").sequence(options).data("sequence");
sequence.afterLoaded = function(){
$(".info").css('display','block');
$("#sequence").hover(
function() {
$(".prev, .next").stop().animate({opacity:0.7},300);
},
function() {
$(".prev, .next").stop().animate({opacity:0},300);
}
);
$(".prev, .next").hover(
function() {
$(this).stop().animate({opacity:1},200);
},
function() {
$(this).stop().animate({opacity:0.7},200);
}
);
}
})
</script>
{/literal}
<div class="row no_bm">
<div id="slider_holder" class="sixteen columns">
<div id="sequence">
<div class="prev" ><span></span></div>
<div class="next" ><span></span></div>
<ul>
<!-- Layer 1 -->
<li>
<div class="info animate-in">
<h2>Clean Design</h2>
<h3>Clear Message</h3>
<p>Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring</p>
<p><a class="link" href="services.html">View Services »</a>
</div>
<img class="slider_bgr animate-in" src="{$tpl_path}img/1.jpg"/>
<img class="slider_img animate-in" src="{$tpl_path}img/1_1.png"/>
</li>
<!-- Layer 2 -->
<li>
<div class="info">
<h2>Slick & Smart</h2>
<h3>Rich Admin Options</h3>
<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
<p><a class="link" href="portfolio.html">View Portfolio »</a>
</div>
<img class="slider_bgr" src="{$tpl_path}img/2.jpg"/>
<img class="slider_img" src="{$tpl_path}img/2_2.png"/>
</li>
<!-- Layer 3 -->
<li>
<div class="info">
<h2>White ain't bad</h2>
<h3>Fully Customizable</h3>
<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
<p><a class="link" href="blog.html">Read Our Blog »</a>
</div>
<img class="slider_img" src="{$tpl_path}img/3.jpg"/>
</li>
</ul>
</div>
</div>
<!-- Sequence Slider::END-->
</div>
{eval var=$text}
{new_products}
{main_specials}
{* upcoming_products *}
{*live_shopping*}
Wo könnte der Fehler stecken? Habt Ihr mir vielleicht einen Tipp?