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’
that’s real good job
thanks!!!
…..
billboc – “I’d love for it to be able to display the images randomly.. any advice?”
In php, maybe put the images you want into an array and shuffle the array values?
heres a short example
http://www.5frag.com/imgarray.txt
Sorry I havnt gone into any detail about the script but its 6:19 AM and I’m nearly out of coffee :/
If you want some help let me know 🙂 you can contact me on my site
< click my name, look for anAIM and Personal Message (PM) me.
Hope this helps
I managed to hook this up to my database and have the slider display my top news posts, here’s a screenshot
http://s121.photobucket.com/albums/o202/Envy-666/?action=view¤t=asdasdasd.png
oops sorry Bassam,
simply replace ‘prev’ and ‘next’ with the code for your image
I’ll try again
Hey awsome slider! Have been looking for a slider like this for a while, good job.
Bassam, here’s what I did –
Open your coin-slider.js file
Go to line 235/236 where the navigation part is
Where you have-
$(‘#cs-navigation-‘+el.id).append(“prev“);
$(‘#cs-navigation-‘+el.id).append(“next“);
simply replace ‘prev’ and ‘next’ with
//////
Vincent, (Remove squares), this is what I did –
Open coind-slider.js and go to line 263 (// image buttons)
All i did was remove that chunk of code from lines 263 to 291
// please correct me if i’m wrong with any of this, but it worked for me.
Thanks, great script
Hey – I have a question similar to “chromax” – I want to display the navigation “buttons” above, or to the left of the slider, instead of underneath it. Is this something that is easy to do, you think?
I have not actually delved into the .js file yet – I will tackle that in a couple days or so – just thought I would check here first.
BTW – GREAT script, thanks!
Justin
“I’d love for it to be able to display the images randomly.. any advice?”
me too !!
thanks for help
😉
Hi
Great Slider but i’m having a problem which i can’t solve, i need to change the prev/next buttons with an image of an arrow or anything else, i succeeded in changing it with another text but not with an image.
BTW i passed over all the older comments but still can’t find a solution for this.
Kind Regards
Bassam
Perfect for a project I’m working on.
Modified the javascript a bit to get the images aligned with the buttons for my use.
Also set spw, and sph to 1 to just get a simple transition.
Hi Ivan,
First of all. A great module. I use it now for the first time.
I wonder if it is possible to show multiple images. For example. To show three different images at the same time.
Is this possible?
Kind regards,
Christiaan
I’d love for it to be able to display the images randomly.. any advice?
I dig this but the navigation squares seem to always be positioned in the center of the page instead of centered under the slideshow.
Hello,
I am a newbie to magento and I need to implement a slideshow
on my home page like the one on this site: http://www.wooftown.com.
Can I achieve this affect with coin-slider?
Thank you.
When the spw and sph values made 1, slide became very fast and slowing problem is gone. (When you do it 0, it goes on to use default values).
Hi
How do I download photo images from my computer hard drive to my Vslider plugin Website. Presently using Google Chrome Browser, Internet Explorer 8, Windows Vista. VSlider Version 3.0 installed..
Thanks
harry@SanDiegoRebateRealty.com
how just use ‘fade effect’ or sliding ?
Is there a way to have it so that they rotate the images randomly?
…really dumb questions here….
I hope mine is not so….How can I place the navigation in a specific container somewhere else?
I already played a little with the appendTo but can´t get it working.
I need the navigation in a column container and not under the image.
Hello everyone,
could somebody help me. I want to have the previous and next button. But like to remove the squares at the bottom.
Thanks in advance !
thanks,very good job