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’
@Din:
u should put that between tags, either in the document header tags or right before the closing tag, meaning something like
$(document).ready(function() {
$(’#coin-slider’).coinslider({
navigation: straight
});
});
I am trying to figure out WHERE to insert this:
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ navigation: straight });
});
I don’t know which document to insert it into, nor where to insert it in the document. Any help would be MUCH appreciated (and yes I have searched prior comments!)
Thanks!
Hi this one is great, but: is there a way to position the navigation squares at will??? i tried the css and even tried altering the properties in the js and they still appear at the bottom.
Thank you.
I find it can’t work well in my site,
错误: $(“#coin-slider”).coinslider is not a function
源文件:http://www.happygame.info/
行:19
Can you tell me how to slove it?
Thank you
Is there a way to make it ‘manual’ so the animations/images do not change on their own. I would like to have it only change when the user clicks Next/Prev.
I realize I can probably set the delay to 1000000000000000000000, but that is not really a good approach.
I would prefer to use this one, but I really like the “jqFancyTransitions” plugin as well. (I have posted the same question there).
Hi, Ivan!
Great plugin, but it doesn’t seem to work in IE8, although it does in Opera, Firefox, Chrome without any problems. What’s wrong?
http://rsart.ru/portfolio/detail.php?ID=17
@Tobi
No, I didn’t think about that : )
@Richard
I think that somebody already did that. Please check older comments.
@Mikee Bee
If you use transitions function, plus some custom code. you can achieve that.
@Rich
No, you don’t have to place a link to my site. I didn’t wrote any tutorial on topic that you mentioned, but I’m sure that you can find some on the internet.
hi ivan, this is exactly what i’m looking for to use in a web project that i’m doing! i’m a novice designer and have never used jquery before but am sure i could figure it out? do i have to place a link back to your site? or are there any other restrictions? also, out of curiosity, i’m also looking for a form such as this one for a feedback/contact form! do you have any tutorials on that? and does jquery validate with the html validation? any advice/tutorials are greatly appreciated? cheers!
Hi all, this is perfect for what I’m using it for but, I was wondering if it would be used as a hover effect so…
2 images. Starts off showing first image then, on hover it reveals the second image, then when you move your cursor away it changes back.
Hope so!!
If anyone thinks this could be doable please let me know : )
Cheers
Mikee
Hi there!
I would like to implement your image slider but I would like to change the navigation boxes to represent the images in the slider.
Is it possible to make your coin slider show image thumbnails instead of the small square boxes?
Great work by the way.
Thanks,
Richard
Its a fantastic script… i love it!
Is there a way to disable the “prev” and “next” buttons when there is only one picture?
thanx for help
The plugin is awesome, but I’ve got a suggestion about prev and next links. I think they should be customizable hence there are non english speakers using it (like me) 🙂
Hi, how do I add a background image to the slider so that it is framed in a custom design?
Nevermind, i fixed it. Didn’t download Jquery….. rookie.
LOVE IT
(for clarification, i didn’t mean there was a problem on your end, i meant i have the coding intellect of a rock and no idea how to properly implement. 😀 )
trying to get the slider to work, doesn’t work in dreamweaver preview or online, not sure why it doesn’t work correctly, any help would be great. I’m a real newbie to java script, i’m sure it’s syntax somewhere just can’t find it.
Thanks All
http://www.avantlaws.com/test.html
Is it posible to display 2 image at the time?not only one …
please help me out if any body knows …
@Mark
You posted an IE fix on October 1. I tried it and it just stacks the pictures, getting rid of the gallery effect.
I also got a syntax error when I pasted in the second change. I’m not much of a javascripter, though, and I couldn’t pinpoint it.
Ivan – Love it.
Mark – Can you please expand on how to add the fade effect? I can’t find the ‘swipe’ function.
Install slider on http://hd-players.com/, Thanks
Hii..Ivan thanks for sharing. It’s resolved whith a higher z-index at firefox 3.0.19 and Chrome 5.0 but still no luck in IE? Any solution ???
It was in the package, excuse me!
Hi there, you have any dev version available for download ? i want to enhance the script to use predefined next/prev buttons and nav buttons…
@Music Critic
If you turn off JavaScript this plugin will not be implemented at all on your page. So you can’t blame plugin if your page looks ugly. My suggestion is to set display: none to all images except first one.
@Dave
You can create that dynamically but it have to be in described format.
@Stephen
Basically it’s a browser issue, but you can tweak with Mark’s suggestions to speed up.
@Mark
Nice job. Thanks for sharing.
@asg
You should set z-index to your drop down menu.
@Paulo
As I see you have problem with your CSS. Try to change .coin-slider to
@Edward
Feel free to use it. Maybe you can send a url to your work after you finish, I will be glad to see it.
I was wondering what is the usage restrictions on your code? I was planning to use this in a template I made and was planning to re-sell that template. Would you be against that even if I left all credits intact referring to you, the author?
If not, that’s cool. Just thought I’d ask!
Great script by the way!