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’
@red
Plugin works, you have transitions, but you can’t see because you have identical images. I can’t imagine how this kind of transitions would look like if you have identical images.
any help please?
i have tried over the weekend to get my problem working but can’t find a solution.
i am wanting to use 5 identical images but to have a transitional effect on it….it displays the image but does not do the transitional effect….the transitional effect works when using 5 different images but not the same one.
any ideas any one?
thanks in advance,
red
This is a great plugin! I was just wondering if there was a way to have the images only play once and then stop on the last image instead of continuing to play over and over again?
Thanks!
this is an awesome script but i was wondering if it could do the following?
i am wanting to use the same image 5 times e.g.
for some reason it doesn’t then apply the transitional effect. it just goes static. is there a way to apply any of the effects to the same image?
thanks,
red
hi! great stuff.
I’ve integrated it with wordpress. So far, works great, except for one thing : the cs-buttons don’t show :s
Any clue?
hi.
i wrote an issue in your google-code-page.
images diplaying in IE but not in FF
@Magneto
It can be done with CSS. Check older comments.
@Malmec
You should check how Sandra solve that here: http://designeworks.com/rja/work_house3.html
I am having issues with the cs-buttons aligning to the left. I have tried altering the css in everyway I can think of…still right aligns.
http://www.signetbuilders.com/gallery.html
What am I missing?!
thanks
It is a nice plugin! But i want to know anyway can change the pagination button to a image buttons(Including the active status of the button)?
@Denis Ciumbargi
First you should include Coin Slider css and js files in header of your page. After that put next code immediately after Coin Slider holder div:
<script>
$('#coin-slider').coinslider({ height: 300, width: 930, opacity: 0.8, hoverPause: true, navigation: false, delay: 10000 });
</script>
Hi there!
Thanks for your work on this great plugin. I just added today to my blog and everything looks fine but, of course, like many other i have a problem. Maybe this is somethign i am doing wrong but i will write about it maybe it will help you develop something better as you sure have the talent to do it.
I am using blogger.com for my blog site and i have a little delay before the script begins to do it’s work.
when the site loads all the images in the slide and their descrptions appear one under the other and after a few seconds they clapse and join into the slider you created. any idea what it is or what should i do so that the images do not appear like this before the site completly loads?
thank you
@Gabriel Zastawnik
I know for those problems (@Rarst already reported) but there is no easy solution to fix that. I should change the approach and rewrite the whole plugin, but I don’t believe that that will happen in near future. I don’t believe that those problems are really big issue, and as I saw all other similar slider have them.
Anyway, thanks for reporting, I really appreciate that.
@Sandra
Try to add span or div with class in description span. Eg,
<a href="imgN_url" rel="nofollow">
<img src='imgN.jpg' >
<span>
Description for imgN
<span class='credits'>Some credit</span>
</span>
</a>
And after this just add style to credits class.
BTW, just installed, few little details, on your Coin Slider Settings you have there is php missing
Thanks,
Emil
PS for all others that might be wondering around š
Hi this is a nice slidshow.
But I think 2 elements are missing :
– A play/pause button
– The way to put some contents different than an image. Otherwise, can’t have to put the image into an
But great job !
@ Sandra
Ive been having trouble with this also… But i manage to get it working. Ive looked at your source and mine and the only difference is the where you placed your script, yours is at the bottom whereas mine is within my head tag? Hope this helps you. Good luck
Dave š
Krzysztof: efekt cienia pod sliderem to background-image ustawiony z position: bottom. A ustawienia odnosnie wygladu ustawiasz w pliku css zwiazanym z coin-sliderem.
Great plugin Ivan!
One of the best I ever used in my Jquery adventure.
If I may ask for a little patch for this script – in IE6 transition effect is very unstable and not fluent. I have also spotted some situations where page loading indicator in webbrowser is showing that page is not fully loaded (newest FF, WinXP and newest Opera). You must click refresh button and after that everything goes smoothly.
I have also spotted a situation, where during a change of jpg file in source directory, coin slider shown new slide without refreshing of the site. That indicates, that maybe there is sometimes constant request to read a file? Try to check it out.
Great script once again!
Gabriel
Love your script. And thanks for answering all the questions!
Ah, right, just spw and sph set to 1 does the trick.
In my opinion, your plugin is one of the best image sliders there is. But with all the effect, why didn’t you include a simple “left to right scroll” effect?
I know, that’s not the purpose of this plugin but I like it simple š
@Jason
could you tell us how you did the Title/description bar to appear only when you MouseOver the image.
thanks.
Where do i put this please?
$(document).ready(function() {
$(‘#coin-slider’).coinslider();
});
Dave š
Hi!
Great plugin Ivan!
But I have question, how change the font size in the title and text field? and second question, whether it is possible to get the shadow effect under the slider?…what should I do? please help!
Thanx.
Regards.
Krzysztof.
Nevermind, I figured it out. Would be awesome to get them to appear and disappear with a fade though.
Thanks for the great plugin. I just have one question, how would I go about implementing code that allows the Title/description bar to appear only when you MouseOver the image, like it is for the navigation?
Greatest plugin! =)
But once request – make a more normal image resizing, as here – http://rapidshare.com/files/383373473/timthumb.php.html