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’
test page. I can’t find why not working. thanks for great script
Hey guys, this won’t work at all for me. In Chrome, FF, or IE. Firefox and Chrome are the latest release (as of this writing) and IE is IE8.
I’ve downloaded the latest Jquery file and included it in the header of my document along with all of the other necessary coin-slider stuff.
Seen here:
Down below I have a div with an id titled “coin-slider” and within this div I have the and tags that the author stated should be used. I have two such images nested inside this div..
However the end result merely has these two images repeated and stacked vertically. As if the JQuery is literally doing nothing at all!
Near the end of the html, right above the end of the body tag, I put:
$(document).ready(function() {
$(‘#coin-slider’).coinslider();
});
</script
Could really use some insight here guys!
Thanks .. This is working great on my website. however sadly it is not displaying the image descriptions added between the span tag.
Any possible causes ? Is it something to do with CSS styling ?
Hi!
I found the slideshow really nice, but i’ve a question
There’s any way to define a delay for the tittle appearce?
Something like, until the picture is not completely shown, the tittle does not appear
Thanks!
Hi there,
How can i change the image size?
Thhe images in the slider be smaller then the real size.
But a simple height=”150px” won’t work.
Hi, nice slider, i had put it into my webiste, you’re in the credits of my webpage. (You can check it on the bottom of my webpage)
Hi, Great work – now – any chance to have events triggered and exposed?
Thanks
Your plugin is great!!
Hi,
Great plugin! Works like a charm. I just wanted to know if there was a way to remove the navigation squares under the image or move them to on top of the image? I am using the slider on a website I’m making and I don’t want the squares at the bottom but would prefer them on the image.
I would really appreciate help on this.a
very good plugin. it would be good to correct the transparency of the text in title, because opacity is linked to the whole object! please add the option “opacityText”, thanks 🙂
Not working. Tried everything. Checked syntax, spent time to examine working one on page, experimented, even clean everything to basic, and… nothing.
Can’t figure it out, but I guess, this error is something from “space”, as even tottaly clean one for test run – won’t work.
Hey there,
it’s a great plugin and the slider looks pretty cool. But I have a big problem – it doesn’t work with another plugin I’ve installed (online booking calendar). So I already asked the guy who developed the template and the guy who developed the other plugin and both try to help me but they need the information if the coin slider plugin supports jQuery 1.7.1 or 1.7.2.
Thanks for your help…
This is a good slide show! I am trying to use it in HTML5 ASP .NET 4.0 website built with Visual Studio 11 and am getting the following error:
Microsoft JScript runtime error: Object doesn’t support property or method ‘coinslider’
Here is my code:
$(document).ready(function () {
$(‘#coin-slider’).coinslider({ width: 260, height: 167, navigation: true, delay: 4000 });
});
Any ideas?
Hi there! Thanks a lot for the plugin. Is there anyway to make this work only with a simple fade effect?
Thanks a lot !!!!
I used this slider on a personal website, but the silder efects like swirl, only appears in IE9 on compatibility mode, on Chrome, Firefox and opera dosen’t work, i’m using jquery 1.6.4 is any problem whit this? can you help me?
Scratch the part of my previous post about lack of the navigation CSS selector in the file. It is there in the CSS file 🙂
Again, thanks for an awesome plug in!!!!!
It’s an awesome plug in!! Thanks for good work!
Two suggestions: on mobile browsers the navigation (prev and next) cannot be shown as there is no mouse to hover with. I would add browser check and wouldn’t call call hide() on “#cs-navigation-‘+el.id” when not applicable (means, show the elements all the time). Also I would add a style to it in a css file so that users can change the font of these buttons, or color, or whatever. Second, I would add another boolean parameter to “fn.coinslider.defaults” to stop the continuous animation that would be checked at the beginning of the transitionCall() function.
Hi Ivan, Thank you very much for such a wonderfull and EASY to set slider 🙂
Hello, this slider is great but I can’t see where exacly I have to “call” Coins Slider with this :
2 $(document).ready(function() {
3 $(‘#coin-slider’).coinslider();
4 });
5
Is it at the very beginning between the or right after the images ?
Thanks in advance for your answer !
You have some great transition photo galleries here, but I’m having one problem.
I’m trying to combine a gallery of mixed orientation images.
Obviously I can’t set a height and width to that of the portrait images, as I would lose the sides of my landscape ones, so I have the size set to the larger of both (ie width of landscape and height of portrait).
Unfortunately, the result is that the extra space is filled by a second copy of the image tiling.
Is there any way to a) centre the image and b) prevent tiling?
Hi Ivan
Thanks, slider is wonderful, exactly what i was looking for. Thanks for a clean code. Nivo Slider sucks, really, comparing to yours from the point of performance.
Hi,
Thank you for your awesome slider !