iView Slider (jQuery)
iView has been stopped!
iView has been stopped from update and support!
You can use our new powerful mightySlider plugin.
What is iView?
iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.
This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.
Multiple customized slider instances can happily live on the same page, and the slider offers a simple API to control the slider’s behaviour from within your custom scripts.
To drastically reduce page loading times, preloading is available on a per slider basis, so that images will only be loaded right before the slider to be started.
Features
- jQuery Capabilities.
- Responsive down to mobile (applies for slider area and images).
- Touch gestures navigation for iOS, Android and other touch devices.
- Highly Flexible and Customizable.
- Highly User Interface Design.
- Custom per slide easing.
- Multilanguage support.
- 35 transition effects available.
- Multiple transitions available, also can set a different transition per slide.
- Multiple instances allowed in a single HTML page.
- Custom per slide timeout.
- Animated HTML captions with custom effects (fade, move top, move right…).
- Slides uses only valid HTML5 markup (SEO optimized).
- Works on iOS & Android devices.
- Auto slideshow with optional pause on hover.
- Easily resizable.
- Animated preloader bar.
- Keyboard support.
- Extremely simple configuration.
- Thumbnails or bullets for navigation.
- Customizable transition timing function. (easing)
- Compatible with external fonts (like Google fonts).
- Integrated 3 beautiful animated and Cross-browser timers which is completely configurable.
- Easily customizable via CSS file.
- Block & slice sizes are configurable.
- Captions can use any tag you want (SEO optimized).
- Extended HTML documentation.
- Any HTML content can be placed inside slide & caption. (except HTML5 video tag)
- SEO optimized, captions can use any tag you want (“h1”, “h2”, “p”…).
- Powerful, documented API — public methods, properties, callbacks (go to slide, play slideshow e.t.c.).
- Unlimited slides support.
- Compatible with all major browsers (including IE6 to IE9 , Chrome, Firefox, Safari and Opera)
- Free support and upgrades.
Dont forget to follow us on twitter or like our page on facebook :-)
and take a look at our premium scripts too ;-)
Demo Download Fork the code on GitHub
Changelog
Version 2.0.1
2012-08-17 Hemn Chawroka
* Fixed video stop bug.
Download dont work… with FB
Download link has been fixed.
Hi, very very good Slider, but i can’t download without Twitter/Facebook-Account. I would not create one for this to download. Could you provide an alternative download?
Download link has been fixed. Have fun! :D
Sorry, but i found only the Download-Link above and it send me to “shareandgetit”, there i could only download with Facebook/Twitter-Account and i would not create an account there. I found no alternative link!?
No problem Michael, you can download it here. :-)
Thanx for the great support.
You’re welcome, Michael.
Awesome slider, didn’t include the license information? :)
This script is under MIT License.
Thank you.
Would love to try this, the “Share & Download” link doesn’t work, at least on Chrome for Mac. Please just give us a .zip file, I might consider liking it on FB then… ;-/
Like my page on facebook is just a thanks to me. Isn’t fair? :-)
Hemm,
I really like your slider application. It’s great. At least at first glance. I can’t say fully whether I like it as I have not been able to actually try and implement it yet, since it took quite awhile to be able to actually download the thing. Therein lies the issue with essentially forcing people to “like” your app via Facebook and/or Twitter before having an opportunity to test it in action with one’s own media. I do appreciate your generosity in providing your slider free-of-charge (that is, after all, a truly wonderful thing); I will say that it is a little disingenuous and flies in the face of a generous act to require liking the app before being able to even download it, especially when people are having issues using the “share and get it” intermediary; I was not able to use Facebook to successfully download the app, and had to sign up for a Twitter account that I did not want, to eventually be able to download the slider from that route. A much better solution would be to provide a direct link, as some have suggested, then ask for folks to “like” your app from there. Assuming your app would live up to the technical demo you have shown (and I have no doubt that it would), you’d likely then, in addition to people “liking” your app, also likely have them paying some cash for it out of gratitude. Please accept what I’ve written only as constructive criticism. Take care & thanks again.
Thank you Joseph for your criticism.
The direct link has been replaced.
+1
i don’t have fb & tw account
It’s not needed anymore Jack!
Hemm,
I appreciate your responsiveness and your willingness to listen to people that view your site and leave commentary. Both are somewhat rare traits these days!
I am sure that future visitors to your site will appreciate being able to download the file directly.
Thank you, and take care! I will let you know if I’m able to use your slider in any project(s).
Thank you again Joseph, i’ll be glad to hear from you!
Gotta say this looks pretty awesome, thanks for sharing.
Found a minor bug with the demo, since I’m not sure if would fit into the slider. When you close the video window while the video is still playing, it keeps playing in the background. I haven’t had a chance to implement this control quite yet, but I hope there is a way to attach to that window close event (clicking the X in the top right) so that people can implement their specific video stop() methods.
Sharing this on GitHub or BitBucket might be a great way to get feedback, track issues, and maybe even get some people that want to help you extend your plugin.
Thanks again for this great responsive slider.
I see Hemn hasn’t responded to this but I think is critical in being able to actually close (stop) the video if the slider carries on. What is the point in having the video there as an eg but carries on playing if you want to add other videos or normal images after.
As I’ve mentioned before I would love to use this slider as a video gallery slider but the videos don’t stop.
Would it be possible to add closing (stopping) the video together with what it currently does (animation reverts to videobgd)?
Hemn, I’ve managed to add 3 lines of code that upon clicking the X button on the video it stops the video but the only thing is it obviously doesn’t revert back to slider. Is there a way to add this in and let it as it will solve the issue with videos still playing in the background.
The added lines are in the iview.js file line 359 and is:
//Bind the video closer
$(‘.iview-video-close’, iv.slider).click(function(){
var video = $(this).parents(‘.iview-video-show’);
var video = $(“#iframe”).attr(“src”);
$(“#iframe”).attr(“src”, “”);
$(“#iframe”).attr(“src”, video);
video.animate({ top: ‘-‘ + iv.defs.height + ‘px’ }, 1000, ‘easeOutBounce’, function(){
video.hide();
iv.sliderContent.trigger(‘iView:play’);
});
});
};
I’m not sure if this added code should be in the *Bind Video Display* ?
I’ve updated to 2.0.1 and this problem has been fixed.
Hemn, Thank you for your time and effort. May I ask is it just the iview.js file that has been updated or more? just want to know if I must look at reusing more than 1 file.
With all these minor things we pick up on and it gets fixed by you, it just makes this one of the best sliders out there to use!
Thank you Marcel,
It’s just a minor update and iview.js has been updated.
This works great, thanks again Hemn. The X (close) button or layer is behind any Youtube embedded video so you cannot close it. It definately shows up correctly with Vimeo videos but not Youtube videos using the Index.html example.
Please advise.
CORRECTION – The (X) close button DOES show infront using Youtube videos in latest Google Chrome but not in IE9 or the latest Mozilla Firefox 14.0.1…
This has been fixed in the lastet download files. Also see my post about what youtube type code to use in order to have the X appear above the iframe used.
Hi there,
nice slider-plugin, it’s just… there’s a problem with 2-lined captions I think. Here’s what I see on Firefox 14.0.1 on osx 10.6.8 -> http://imgur.com/a/t6KFM#0
No it’s not a problem just set the width of the caption.
Read documntation for more details.
Yo buddy, dis shit So damn fresh to me!!!
Only one extrem small question:
——————————————————————————-
In your documentation is:
but i cant find dis iview.encoded.js file in the download folder. did i need dis?
Respect!
Thank you buddy!
No it’s not needed you can use iview.pack.js if you want to use packed version of iView.
+1
Great slider :) Congratulations for your awesome job !!
I have one question. Is it possible to know the current slide number? So I can make my own navigation elsewhere in the page. Thank you once again!
Thank you so much Nuno, yes of course you can do it. Simply add this callback method:
onAfterChange: function(){
alert("Slide number: " + this.defs.slide);
}
Like:
$(document).ready(function(){
$('#iview').iView({
pauseTime: 7000,
directionNav: false,
controlNav: true,
tooltipY: -15,
onAfterChange: function(){
alert("Slide number: " + this.defs.slide);
}
});
});
And you can find out how to know the current slide number. :-)
Hello Hemn :) thank you so much !!
Cheers!
Hi, thank you so much for the script.
May I ask how to add link to the whole image per slide? TQ.
Thank you so much Ivory,
Just create slides via “<a>” tag instead “<div>”.
Don’t forget to add some CSS styles like:
a.slides {
display:block;
width: 500px;
height: 300px;
}
Great slider one of the best I have come across one small problem I am using the banner size 728×90, but I need to use the size 572×117 I have edited and changed sizes in the relevant css files but I wont change the width height has changed ok but is still 728 px wide have you any idea how I can use my desired width?
Thanks
Steve
Thank you Steve,
You must change the width of these two CSS element selectors:
Hello again :) Having a great time with your slider :)
Would you advise on a “best-way” to reload the plugin with a different set of slides?
For instance, I start with slides 1, 2 and 3… and, when I click a button, I want to load a new set of slides. How can we do that? Thanks once more :)
Hi ! Thanks for this, it’s awesome !
Is it possible to add a link not in a caption, but on the complete picture ? People are use to click anywhere on a picture to follow a link, i don’t want to loose them.
Thanks a lot Sam.
Yes of course it’s possible. Just make slides with a link element instead div element and style them with “display:block” in CSS file.
Hello again Hemn :)
Is there a way to set the animation fx on the previous or next trigger ? For instance, I want to slides to come from left when I click previous and from right when I click next.
Thanks,
Nuno
Hello Nuno,
Yes it’s possible but with some tricks and by the help of the “onBeforeChange” callback.
Thank you for this spectacular work. Just what I needed. Congratulations.
Thanks a lot Francisco,
Nothing, just download it and have fun! :-)
The documentation is available in the download file.
Hi there,
Your script works like a charm, but can i make it with IE9?
Thanks
Thanks a lot.
Yes of course, this script is cross-browser compatible.
Ok indeed,
I just got how it work, thanks.
I have a question so :
Is there any way to speed up the transition effect?
Like when i use “strip-left-fade” fx , more the number of strip is high less the animation is quick.
Of course, the “animationSpeed” option is available for this.
Hmm, the animationSpeed seems to affect the fx speed but not “slide” speed.
Like when strip is set to 800 (its a lot but its for the example) the processing is very slow. Is there nothing for that?
I just wanna thank you for sharing your work, this is a very awesome slider.
Thanks a lot Junior.
Hi Hemn!
What a smooth and nice slider!
I was blown away when I saw this for the first time…
Can’t believe that some people start criticize your work when it’s a freebie…
Niklas
Thanks a lot Niklas. Kind of you.
HI Hemn,
Honestly, one of the best sliders out there. Its great! I emailed you but thought might be easier here.
In Firefox 14.0.1 using a iframe with a youtube video for some reason doesn’t show up. It works great in IE9 and latest Google Chrome. In Mozilla, all you see is a black area. Vimeo eg you provide works fine but not youtube links. Is this possibly a z-index problem for Mozilla?
Hi dear Marcel.
I’ve tested it with youtube video in both video preview and caption, and i don’t see any problem with youtube video.
Hi Hemn, thanks for getting back to me. Its definately only in Mozilla Firefox 14.0.1. I’ve tried a few youtube links, Vimeo vids are fine. Please could you send a working youtube link (code), as I’ve tested a few. There is also a minor problem with the captions, in Chrome they go behind the video. Seems like its a Z-index problem but works 100% in IE9 & Firefox 14.0.1.
I will send you an online link so you can see.
Lastly, I’d like to use this slider for only videos. Is there a way to switch off the auto change to the next slide? Once the video is playing and you move the mouse away, it obviously slides.
Apologies the Video caption goes behind the Video links in IE9 NOT Google Chrome…
TO USE THIS SLIDER AND YOUTUBE VIDEO LINKS TOGETHER you need to use the code below for the (X) button to appear ontop of the youtube iframe.
Eg.
http://www.youtube.com/embed/7DB94Z3CMO4?wmode=transparent
Notice the “embed/” path aswell as the “?wmode=transparent” at the end of the link string.
If you do not use this above code the video will appear but you won’t be able to close it with the width & height being set at 100% as you won’t see the (X) button.
Great slider! Looks fantastic. I’m looking forward to seeing how it performs in older browsers like ie7.
Josh, you should start to look at only IE9 and beyond, IE10 will officially be out soon. Browser Compatibility in all things is just not going to be possible with HTML 5 and CSS 3.0 scripting anymore. People need to upgrade and move on!
Ya, in my dreams. Sadly I have computer illiterate clients that beg to differ on that. I tried making my sites for IE9 and up but I got boat loads of complaints from everyone and their uncle that said my sites looked horrible… I’ve been experimenting with chrome frame and hopefully that will allow me to use html5 and css3 more often. :)
Hello Hemn :)
Is there a way to reset a slider and load a new set of slides?
Thank you so much
Nuno
Hi Hemn,
First of all, thanks for this great freebie, can we use it on our commercial projects?
Thanks a lot Hoko,
Yes of course you can. For more information about the license go to license page.
Hello. I love this slider. The best one i have ever seen, though, I can`t get the prevNav and Nextnav buttons to show. It only shows the words prev and next at both sides of the slide. I have been trying to figure out what is going on but can’t find the problem. Can you help me with this?
Hi Alex, depending on your route structure, you’ll probably need to put in an extra “../” in the css scripts as I had to. So in total for all images in the CSSof my website i have the following “../../../img/…….”
Thanks, I checked that out and that is not the case. It didn’t seem to be the problem anyway because the slider shows all other elements present in the CSS file and images in the img folder. It is strange though, I remember having used another slider before (from another coder), and had the exact same problem (nav buttons didnt show up), but never even tried to fix it because I didn’t need to for what I was using it for. Any other hint?
Hi Alex, 2nd thing could be that you’re trying to use all the images for this plugin under one folder namely ‘images’? I’m thinking there’s a reason for both ‘images’ and ‘img’ folders being used.
Thanks for sharing this awesome and fleksible slider :)
However it’s important to add wmode=transparent to iframes with youtube videos, otherwise the video is not hidden when you move to next slide, e.g. it’s a problem in Safari ..
Chrome is the browser, where I think it looks most correctly.. I needed to add wmode=transparent to display video and the effects correctly in among others Safari.
Also I have to specify the width og the captions, e.g. for IE, otherwise a part of the text is cutted/hidden..
Agreed, I have asked Hemn to kindly add this into the documentation or into the example pages.
Youtube links naturally have a z-index of 1000000+ and is in their terms of use.
Anyone having trouble with IE9?
In my case it does not make the transition from slide 1 to slide 2 and gets stuck?
I tried on 2 different computers, both vista, with same results. Any clues?
Where exactly is data-easing used? On the captions, right?
Yes exactly, and for slides you need use “data-iview:easing” attribute.
Hi Hemn,
Thanks for replying so quickly. So data-transition and data-easing can applied to and data-transition and data-speed to captions only?
Thanks.
Sorry my previous message didn’t go through completely.
So data-easing and data-transition can be applied to the actual background image and data-transition and data-speed to captions? Is that correct or can data-easing be used on captions too?
Thanks
Is it possible to hide captions incl. video elements inside captions until the slider is preloading?
Sometimes if you refresh the page, you’ll see the caption on top of each other in the upper left corner, but only for very short time.., e.g. if the refresh the page here: http://iprodev.com/iview/index2.html
+1 This plugin is very very nice!
Thank you
Really awesome slider. I’ll definitely be using this in the near future.
In Firefox (v 15) the captions do not always render correctly. Part of the text is shown on a new line but the bottom half of the text is cut of.
Use data-width attribute to fix it.
Wow thank you Hemn, this is the perfect responsive slider I’ve been looking for! I’m going to use it right away in a few projects.
This is the only BEST plugin so for I have seen.I had been searching for such plugin since 6 months but I found this only now. I want to know how to make this to display full screen,if this could be done how to use Supersized jQuery Plugin, as I am new to java script I do not know how to code and use it, I request to please advise and guide me.
Thanks
This is not displaying in full in ie and firefox .Only one fourth of the webpage is displayed.Please advise me any special code is to inserted in the webpage.It works fine in chrome and safari.
Thanks
I’m trying to set a specific width to the images loaded in data-iview:image=”” as i’m loading bigger images then the size of the div. but i cant find the jquery script that is controlling the width.
Where can i do this?
Thank you for your help. Great script!
Thank you man:-) great Work..
Great, latest tech slider i just downloaded and tested successfully with Safari!
Hi,
Superb slider, easy to use and looks great.
I have a question, is there a setting to switch off the timer? Or do I have to modify the js myself to do so?
Thanks for this great creation.
Yes, sure. Just set “autoAdvance” option to false to disable autoplay timer, and for hiding the timer set “timerOpacity” option to “0“.
Thanks Hemn for the quick reply! Really appreciate your effort. =)
Can I ask another question please? Is there a way to switch off the animation too? I have problem showing animation on slower computers. I know there’s a setting to limit the number of strips and blocks.
Hi! Thanks.
Is it possible to hide/remove the timer? If so, how?
Ok, sorry. Found your answer to Jake. A couple more though. How do you make the responsive example full width? And how can you set the animation so that each slide well, slides left horizontally? Like in this one http://flexslider.woothemes.com/
The fullwidth feature will be available to next version. :)
Just read the documentation.
Hey Hemn, Congratulation for the great slide, it’s the best free slider I’ve ever seen
I would ask you if you’re managing to make it as an extension for joomla, if not is it easy integrating it in joomla code.
Thank you
Hi Hemn
First of all thank you for the great work, it’s th best free slider I’ve found till now
I how a problem, it’s that I’m creating a website using Joomla, and I would like to know if you are managing to create your work as an extension, if not is it easy to insert it in joomla code as I’m away from developing.
Thank you.
Superb slider! Out of curiosity, is it based on the original Flex Slider, now taken over by Woo Themes?
I was wondering how I might center the images be default in case some are smaller than the container. CSS didn’t seem to work, are the images “pasted” into canvas, allowing for the transition effects?
Thanks!
Hi David,
Thank you, but this is my original work and it’s not based on any other sliders.
Flex Slider is just a carousel. iView is the slider that has very powerful features that they don’t have half of its.
Images cannot be in center until next version. :)
David: Try this, create png image files the size of the container with your image in the center and transparent background to fit the size of the container.
Hi Hemn,
First, great slider! It’s an unique one.
Just a question. Is it still being developed? Because there is no updates for months.
Cheers
Yes of course, i want to develop version 3 :)
Hi Hemn,
First of all, thank you for you very avesome slider.
I’m trying to create custom captions with jQuery animation (flying captions). In “onAfterChange” function, I need to get the index of the next slide, which is not fully apeared. I haven’t found any clue in iView API that may help me to do it. Can you tell me please if there is any other solutions?
Thanks in advance
I made it myself by wrapping the code with setTimeout
options.onAfterChange = function() {
var iview = this;
// Show Caption
setTimeout(function() {
var next_slide = iview.slides.filter(“:visible”);
….
})
}
Thanks
Add this to get current slide number:
iview.defs.slideHey,
I created a Jahia module for your iView slider, code can be found here : https://github.com/rvt/jahia-iview
Cheers,
R. van Twisk
Hi Hemn,
I think I found a bug. If you apply box-sizing: border-box to your CSS. It will break your captions container and text.
Any idea how to fix that?
Cheers
Best free slider plugin ever.
Since now I’ll use it in all of my projects.
Thank you Hemn ;-)
Hi! There is a problem with the slider. A text inside captions moves to another line. You can fix the problem by putting “white-space: nowrap;” inside “.iview-caption {}”. Location of “.iview-caption {}”. construction is “css/skin X/style.css”.
For example:
css/skin 4/style.css
.iview-caption {
background: url(‘../../img/caption-bg.png’);
color: #FFF;
border-radius: 3px;
white-space: nowrap;
padding: 10px 15px;
font-family: Verdana;
font-size: 12px;
text-shadow: #000 1px 1px 0px;
}
Hi!
I have a question?
What will happen to the image click event..
Can you help me?