CarouFredSel Image Images
I am using CarouFredSel for a website that I am developing, however I am having a problem ... everything is working as expected until I try to link images to a url.
script
looks like that:
$(function() {
/* Homepage */
$("#slide-image > div").carouFredSel({
auto: false,
items: {
visible: 2
},
next: "#next",
prev: "#prev",
scroll: {
easing: "quadratic",
items: 1
},
width: "100%"
});
});
and code
looks like this:
<div id="slide-image">
<div>
<a href="www.example.com"><img src="images/example.jpg"></a>
</div>
</div>
Any help is appreciated :)
Thanks
Josh
source to share
I understood that!
As I looked around I found that on the CarouFredSel website they have some tips and tricks ( http://caroufredsel.dev7studios.com/support/tips-and-tricks.php ) and in the middle of the page they document "Use the blocks that float to the left "... right below that the code HTML
they use is linked ... so I just copied that and the presto!
So now mine script
looks like this:
$(function() {
/* Homepage */
$("#slide-image").carouFredSel({
auto: false,
items: {
visible: 2
},
next: "#next",
prev: "#prev",
scroll: {
easing: "quadratic",
items: 1
},
width: "100%"
});
});
and code
looks like this:
<div class="slide-image">
<div id="slide-image">
<a href="www.example.com"><img src="images/example.jpg"></a>
</div>
<div class="clear">
<!-- -->
</div>
</div>
Major changes:
- I gave the inner div an id which also made my main function change
- I am clearing the float, which is a little tricky to understand because I have not posted my css (although it is the same as in the example: http://caroufredsel.dev7studios.com/support/tips-and-tricks.php )
Apart from the code, exactly the same as what I wrote originally ... glad it was a simple solution - hope it helps someone!
Thanks
Josh
source to share