After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider.
Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects.
jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.
While I was working on this I felt like I’m on college again. Creating order of squares appearance remind me on my college projects when I spent few night and days trying to solve some problem. Random and straight was simple, but swirl effect give me some trouble. Fortunately, I’m working with Milos Popovic who like to solve those kind of problems and he help me about swirl function. Kudos to Milos!
For rain effect I spent few rainy hours to built it and that’s why I gave him that name. Naming things is something that I’m not good at.
How to use
Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="coin-slider.min.js"></script> <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
Add slider content and create one div with an id and put images and image descriptions, similar to:
<div id='coin-slider'> <a href="img01_url" target="_blank"> <img src='img01.jpg' > <span> Description for img01 </span> </a> ...... ...... <a href="imgN_url"> <img src='imgN.jpg' > <span> Description for imgN </span> </a> </div>
At the end all you have to do is to call Coin Slider:
<script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider(); }); </script>
Example
Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you’ll do this:
<script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 }); }); </script>
List of all options
width: 565, // width of slider panel height: 290, // height of slider panel spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: '', // random, swirl, rain, straight navigation: true, // prev next and buttons links : true, // show images as links hoverPause: true // pause on hover
Notes
Be careuful with spw and sph because large numbers can cause transitions problems.
If you don’t set effect all effects will be implemented by random.
Check the demo of ‘The More Awesome jQuery Image Slider’
I’m looking for a way to put a photo credit aligned on the right hand side but only under certain photos. Meaning, it might occur at the same time as a title, or it might appear with no title. If it has to be part of the title, I’m looking for at least the ability to style it differently than a title. (ie: smaller font, paler colour). Is this something that I’d have to add to the .js files? I have no idea how to modify these ones! Your help is sooo very appreciated!
Here’s a sample of one of the slideshows:
http://designeworks.com/rja/work_house3.html
You’ll notice that the photo credits appear under everything including the drawings, which is what I’m trying to avoid. Thanks so much!
Nice transition effects. The transition effects a bit slower in IE8 and IE7 but thanks for sharing anyway
@sandy
There is no strips in this slider.
@dhananjai
You should wait for Coin Slider WordPress plugin.
@Max
Put thumbnails as navigation buttons background.
@Sam
Just put title in b or strong tag.
Hi there,
It’s OK for “$(’.cs-prev’).html(’text for prev’); $(’.cs-next’).html(’text for next’);”, it was a cache problem !
But, about the bold title, how can we do that ?
Thanks for the excellent plugin!
Is there any way to use thumbnails as navigation buttons?
hi there,
i want to use coin slider on my website which is in wordpress, i tried to put the code in header but it is not working, can you suggest me please that how can i use this slider in wordpress. please reply soon.
Another question : is it possible to put the title in bold ?
Hi Ivan,
Thank you for this great slideshow.
Just one question :
I tried to change “prev” and “next” as you said
Below coinslider() call add those lines of code :
$(‘.cs-prev’).html(‘text for prev’);
$(‘.cs-next’).html(‘text for next’);
But it doesn’t work.
Here is my code :
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 566, height: 240, effect: ‘straight’, delay: 8000, opacity: 0.5});
$(‘.cs-prev’).html(‘text for prev’);
$(‘.cs-next’).html(‘text for next’);
});
Could you please give me a hand to fix it ?
Is it just me, or does this not work in IE6? I’m just trying to view the demo and it won’t work properly. The image loads, then disappears. Sometimes the “coins” work (partially), but mostly it doesn’t seem to work.
I’d love to use this on a new site, but I need it to work correctly in IE6, too.
hi, found this snippet of CSS with another slider (Nivo I think) that gives nice border around it and margins (add a div above the regular div). Think it may be firefox only – I cannot get even the basic slider to work in IE8 for some reason (anyone solve that?).
#sliderDiv {
position:relative;
margin:10px 30px 30px 30px;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
Is there a way to add more strips to it?
Hi Ivan, great-nice-easy to implement plugin…thank you. One small thing i would like to do is to set the autoplay off. So that way i get the fancy transitions while having 6 sliders in a page and not getting stop-motion like in IE.
Please…
greetings from santiago, chile.
@Ivan Thanks for the heads up, sorry I didn’t notice that there were more comments than just the current! Thanks again for the script.
@feature request
I don’t think that that feature is necessary, because bunch of sliders on one page will cause chapped transitions. If you have few sliders on one page you can put their ids in array to achieve what you want.
@Christian Ross
Check previous posts, there is explanation how to achieve simple fade transitions.
Nice little slider/script. Thanks for sharing. Any chance you might consider adding a standard fade to the transitions? Simple to implement on my own?
In the next version could you allow it to work on arbitrary jquery selectors? When I use something like $(this) instead of $(“#id_selector”) I get an error in firebug: “uncaught exception: Syntax error, unrecognized expression: #”. I am trying to use it on an arbitrary number of sliders on a page so I only have to use one init function. (and the divs don’t have id’s so I guess it is trying to produce an ID selector but just gets the #)
The ‘next’ button is not appearing for me.
Yup, sorry. I understand now what you mean and I revised throughout the site. It’s all good! Thank-you SO very much!
@hexfusion
I can reproduce gap issue, maybe you can send me code snippet ?
@Sandra
I’m looking at link that you sent me and there is still comma [ , ] at the end of coinslider call. The one after
delay:5000
Thanks for the quick reply. That doesn’t seem to help though. IE 6 and 7 are both displaying the images as a long list, and displaying them in full instead of hiding all but the first. I’m almost ready to put this site live and to discover that the galleries don’t work in IE is a last minute disappointment! Otherwise, it’s so beautiful (your script I mean)!
Ivan,
Great script first off, but in IE 8 the transition seems to have a 1px gap between sph and in slower machines it looks not real great. Probably an easy fix but just wanted to give you aheads up.
Sandra, just remove last , It should be:
('#coin-slider').coinslider({ width: 670, height: 400, navigation: true, spw: 1, sph: 1, hoverPause: true, delay: 5000});
instead
('#coin-slider').coinslider({ width: 670, height: 400, navigation: true, spw: 1, sph: 1, hoverPause: true, delay: 5000,});
Hi, I love this gallery but I can’t seem to get it to work on IE7 or 6. Here’s a link to the testing page:
http://designeworks.com/rja/work_house2.html
What am I doing wrong?
Please advise! Thanks in advance.
Hi,
I was wondering if anyone was having any issues with the slider being really slow in IE8?
It’s seems that it is very choppy. Anybody know a solution or is it just IE8?