Hallo meine Lieben,
hat jemand von euch schon einmal die fancybox2 und cycle2 gleichzeitig eingebaut/gebraucht?
Irgendwie läuft das cycle2 bei mir einfach nicht an.. bekomme aber auch keinen Fehler in der Konsole und bin nun überfragt was ich falsch gemacht hab oder ob sich die beiden Plugins vill einfach gegenseitig nicht leiden können?
Die Fancybox läuft ganz brav, das cycle leider gar nicht, bei klick auf die links prev & next springt der wieder an den Anfang der Seite und das wars. Ebenfalls scheint das ganze Gedöns, was eigentlich von Cycle kommt(klassen ect), nirgends gesetzt zu werden. Ist die Frage ob das Cycle 2 nur img-tags behandeln kann? dann wäre klar warum er mein Code nicht nimmt...
Hier mein Code dazu
html:
Jquery:
CSS:
folgende funktion wollte ich vom cycle benutzen
siehe
Non-Circular
http://jquery.malsup.com/cycle2/demo/carousel.php
ich hoffe irgendjemand weiß Rat :/
LG Niki
hat jemand von euch schon einmal die fancybox2 und cycle2 gleichzeitig eingebaut/gebraucht?
Irgendwie läuft das cycle2 bei mir einfach nicht an.. bekomme aber auch keinen Fehler in der Konsole und bin nun überfragt was ich falsch gemacht hab oder ob sich die beiden Plugins vill einfach gegenseitig nicht leiden können?
Die Fancybox läuft ganz brav, das cycle leider gar nicht, bei klick auf die links prev & next springt der wieder an den Anfang der Seite und das wars. Ebenfalls scheint das ganze Gedöns, was eigentlich von Cycle kommt(klassen ect), nirgends gesetzt zu werden. Ist die Frage ob das Cycle 2 nur img-tags behandeln kann? dann wäre klar warum er mein Code nicht nimmt...
Hier mein Code dazu
html:
Code:
<script type="text/javascript" src="/cms/layout/js/jquery.js"></script>
<link rel="stylesheet" href="/cms/layout/js/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/cms/layout/js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="/cms/layout/js/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/cms/layout/js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/cms/layout/js/cycle.js"></script>
<script type="text/javascript" src="/cms/layout/js/cycle.carousel.js"></script>
<script type="text/javascript" src="/cms/layout/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/cms/layout/js/function.js"></script>
<div class="galerie">
<div class="galerieIn slideshow" data-cycle-allow-wrap="false" data-cycle-carousel-visible="5" data-cycle-prev="#prev4" data-cycle-next="#next4" data-cycle-timeout="0" data-cycle-fx="carousel" style="position: relative; overflow: hidden; width: 1026px;">
<a class="fancybox-thumb" rel="fancybox-thumb" href="bild.img"><img src="bild.img" alt="" /></a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="bild2.img"><img src="bild2.img" alt="" /></a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="bild3.img"><img src="bild3.img" alt="" /></a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="bild4.img"><img src="bild4.img" alt="" /></a>
</div>
<div class=center>
<a href=# id=prev4><< Prev </a>
<a href=# id=next4> Next >> </a>
</div>
</div>Jquery:
Code:
$(".fancybox-thumb").fancybox({
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
$.fn.cycle.defaults.autoSelector = ['.slideshow'];CSS:
Code:
.galerieIn a{
display: block;
float: left;
height: 224px;
margin-right: 10px;
overflow: hidden;
width: 240px;
}
.galerieIn a img {height:224px;margin-left: -10%;}
.galerie {
background-color: #fff;
left: 0;
right: 0;
height: 230px;
overflow: hidden;
margin-bottom:52px;
position:relative;
}
.galerieIn {
overflow: hidden;
width: 1026px;
margin: 0 auto;
}
.galerie .center{
bottom: 0;
height: 25px;
left: 7px;
position: absolute;
width: 100%;
z-index: 5000;
}
.galerie .center a{position:absolute;}
.galerie .center a#prev4{left:0;}
.galerie .center a#next4{right:0;}folgende funktion wollte ich vom cycle benutzen
siehe
Non-Circular
http://jquery.malsup.com/cycle2/demo/carousel.php
ich hoffe irgendjemand weiß Rat :/
LG Niki
