Und täglich grüsst der Slider :-(
Verfasst: Sa 4. Jan 2014, 21:56
Seit bald 2 Jahren versuche ich sporadisch einen Slider auf meiner Seite einzubauen. Bisher endeten die stundenlangen Einbauversuche jedes Mal in der Sackgasse. Seit rund 4-Tagen versuche ich jedoch - bis jetzt leider erfolglos - einen solchen Slider auf meiner Seite einzubauen. Doch ich schaffe es einfach nicht, diesen korrekt einzubinden. Ich weiss nicht mehr wo ich den Fehler noch suchen könnte, denn ein ähnliches Modul welches ebenfalls eine dynamische Bildabfolge ermöglicht, konnte ich ohne weitere Probleme auf einer normalen html Seite einbinden. Deshalb meine grosse Bitte. Könntet Ihr kurz mal einen Blick auf meine Gebastel werfen? Ich bin sicher, ich mache nur einen kleinen Fehler.
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)
Und folgende Ordner werden dafür benötigt:
/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:
Und in der template_defaults.php sitzen die jeweiligen Verweise zu den css und javascript Dateien. Natürlich sind die oben genannten Dateien auch in den jeweiligen Ordnern untergebracht.
Wo könnte der Fehler stecken? Habt Ihr mir vielleicht einen Tipp?
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?