Features include:
- Panels are HTML Content (can be anything).
- Multiple AnythingSliders allowable per-page.
- Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).
- Optionally resize each panel (specified per panel in css).
- Optional Next / Previous Panel Arrows.
- Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
- Link to specific slides or go forward or back one slide from static text links
- Each panel has a hashtag (can link directly to specific panels).
- Optional custom function for formatting navigation text.
- Auto-playing slideshow (optional feature, can start playing or stopped)
- Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
- If slideshow is active, a playing video will complete before the slideshow continues.
- Pauses slideshow on hover (optional).
- Optionally play the slideshow once through, stopping on the last page.
I checked out nivo slider:
ReplyDeletehttp://nivo.dev7studios.com/
I spent a lot of time yesterday going through the nivo slider and figured out that it will not work since I have different size images.
Features I would like:
- a top right and bottom left transperant arrow to show one can press it for full screen presentation. I have seen it here and there as a way to click thumbnail images to be large. But here they can be used for full screen popup.
- captions under slider images. Perhaps it's own div box or something. Caption area to add text, images, mp3 etc. Customize size of area. For instance begin a piece of audio when slider comes to an image. Linkable area.
- different size thumbnails under slider. Below caption area.
(auto create thumbnails from images)
- what about transition effects?
(Actually copy the good stuff from Navo slider and implement it into this slider. Navo looks really nice, has a very nice style to it. It seems the creator is busy elsewhere to continue updating it, so perhaps you could get some code from him and implement it or something similar into Anythingslider.
Thanks have a great day!
Paal Joachim
paaljoachim AT hotmail.com
Hi Paal!
ReplyDeleteSadly, some of the features you are requesting aren't possible to do in Javascript and here are my feelings on the features that are possible.
1) Adding a button to make the presentation full screen is only possible using flash.
2) Captions can easily be added to the slider content then use one of the callback functions to reveal the captions once the panel is in view. I can provide you with an example if you need.
3) You cannot auto-create thumbnails with javascript/jQuery alone. It would require some server side processing to do so. So I can't think of a practival way to add this. It is possible however to use premade thumbnails if you use a site like photobucket (e.g. to get the thumbnail for this image:
http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg just add "th_" in front of the file name http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/th_bg1.jpg
4) Transition effect would be really nice, but please realize that Nivo Slider only deals with pictures so making the transition effects isn't as difficult as dealing with text, objects, frames and images. So at this time I feel like it would bloat the code too much for me to deal with this feature. Maybe when I have more time I'll look into making an extension.
Thanks for the feedback though!
What about extending Anything Slider to use extensions made from flash etc?
ReplyDeleteAdding a request at Github and CSS tricks etc. I bet there are people that would enjoy adding extensions that would greatly extend what Anything Slider can do. People usually like to share what they have done and it would benefit adding customizations others have created.
Or asking for extensions people would like to see.
Having the Anything "team" create the extensions.
Instead of full screen what about just making the image certain percent bigger width and height (user customizable percent size)? Mixing a lightbox popup with optional caption and this slider.
What about adding an example to the Anything Slider page/customizable doc/etc to show how to add caption the way you suggest? I would like to know how and probably others as well. Writing how-to notes along the way one can later share with the community. The more clearly and easy to understand docs the more people will begin to find ways of using the slider for anything....:)
I usually keep in the back of my mind when I make tutorials: Step-by-step - baby steps. Clearly understood how-tos. I have worked as a web design teacher with students who need a basic approach to understand the software they are working with.
So I have created video tutorials for them to go through as often as they like.
Auto creating thumbnails can probably be done with flash or some other "plugin/extension". I am thinking of a way to easily add lots of images to the slider without having to go some place else to create the thumbnails.
Having various people add extensions is a very good way to customize Anything Slider! People create. People greatfully share back to the project their creations.
Have a great Sunday!
The last post was really wordy....
ReplyDeleteThanks for taking an important part in creating the Anything Slider! I have slowly begun experimenting with it. Have a great Sunday....:)
Hi Paal Joachim!
ReplyDeleteActually, I'm working on an AnythingSlider extension that add some animation to the contents. Sadly it won't be on the level of what Nivo Slider can do; but it'll make it a bit let static :P
This comment has been removed by the author.
ReplyDeleteHey Mottie..:)
ReplyDeleteI have continued testing out the Slider.
I am modifying slider one on the demo page. How would I add captions in the center underneath the image? To the right of the tab numbers.
I look forward to checking out the extension!
Have a great evening!
Hi Paal!
ReplyDeleteI just updated the plugin... I tried to include most of the things you requested: thumbnails, lightbox, panel effects and captions.
Check out the demo page! You can download it from the link there!
Tell me what you think and thanks for the suggestions and input! :)
Hey Mottie!
ReplyDeleteGreat! Awesome to hear!! I look forward to testing this out!! Which I am doing right now...:)
I hope you do not mind, but I am going to give my early first uneducated impressions. (and extras..:)
Mini thumbs on the images. What about moving these under the images? Or making the thumbs semi transparent images?
When turning on the slideshow thumbs really do not need to came forth for each slideshow image. It becomes distracting with they hop in like they do. I easily lose focus of the images behind.
What if the images instead of jumping from below and up into view begin transparent and on hover they become semi transparent. Meaning that they do not movie only change their transparency.
Popup nice! Can I press an arrow in the popup so that I can move to the next content?
This site has a lot of interesting tutorials:
http://tympanus.net/codrops/category/tutorials/
I have included a bunch of links to various slider like tutorials made from Jquery.
Here is a sample of another slider:
http://tympanus.net/codrops/2010/10/07/slider-gallery/
Here is another. This is called slider form. Not sure what to think of it: http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
Here is a full screen slider (looks interesting):
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
More inspiration:
http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/
Hover fade in:
http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/
Effects. Content that comes forth gradually would be nice (from semi transparent to fully visible). The Slider has something kinda like it.
Caption at various places user defined it seems. Can this be on hover effect? Good it can be done.
Caption above or below image would be nice. Adding the same effect to the caption as the image. Sliding in image from the right toward the left. Caption could do the same. Caption and image sliding together.
Demo 2 with the tabs underneath. These tabs could be thumbs.
I have seen in some video/audio players this setup: http://darkonyx.web-anatomy.com/en
There you can see video area and the playlist on the right side. This means thumbs with info could be on the side.
I emailed the guys behind the iMect Player asking why they had not updated for over a year. Their response that they did not have the time to update and planned on releasing the source code soon. http://player.imect.com/
What about mixing the video/audio player with Anything Slider?
Lots of thoughts in this long post...:)
Have a great day! Thanks for your work Mottie!
One more thing that came up.
ReplyDeleteSometimes I want to click the content to open a web page. To include a link and the popup in the content area what about including a semitransparent icon for full screen which comes up on hover in the top right area. This means someone can customize yes or no to popup, and add a link, and a caption. Nice choices here!
Hi Paal!
ReplyDeleteActually some of the suggestions you made are already possible.
Demo 1:
=======
The thumbnails appear on hover and disappear when unhovered is accomplished by setting "toggleControls" to true. If you want to move the entire thing below the slider, then you can use the "CS-Portfolio" theme - which is basically CSS to reposition the navigation bar. Modify that theme's colors to whatever you want. If you wanted to change the transparency of the navigation, this also is a CSS setting. Set '.thumbNav a' to a higher opacity, then set '.thumbNav a.cur' (current link) to an opacity of one.
It may be possible to make the popup into a slideshow as well, but it was a limitation of the colobox plugin when I used it - I couldn't pass a list of images to it. I'll have to investigate this some more and maybe contact that author.
Demo 2:
=======
The effects are made to be highly customizable. WHen you say you want content to come forth gradually, that is already an option "fade" which animates the element's opacity from zero (invisible) to one (opaque). This too can be modified if you make your own custom fade effects - check out the notes for demo 2 about custom effects.
These tabs could be thumbs as well... it's all accomplished with the "navigationFormatter" options (function)
Demo 3:
=======
The script for captions that appear on hover isn't demonstrated, but the code is there and has been tested to work properly. Having a caption outside the slider may prove difficult as the slider is set to hide any content outside of the viewport. But it would be possible if you make your own custom script to bind to a "slide_complete" event and have it popup the appropriate caption (located outside of the slider).
Making the caption slide along with the along with the image would be possible, but you are basically talking about adding an caption below the image without using the FX extension then - all contents of the panel will slide out together. So maybe I don't understand what you mean here.
Misc:
=====
Adding additional support for other audio/video players, I'm afraid, would just bloat the code of the AnythingSlider too much... I could may be look into making more specific extensions for the script, but honestly it's a lot of work and I don't have that much time. The DarkOnyx player is very cool looking though!
I didn't understand your last comment about adding a semi-transparent icon for full screen to customize a popup, link or caption... what do you mean? I think I mentioned this before... it isn't possible to make content expand to full screen with just javascript/jQuery, and I don't have the knowledge of flash to look into that option.
Hey, thanks Mottie!
ReplyDeleteI become so inspired by so many types of uses for the Slider that I just keep the ideas coming. Some ideas are practical other ideas are not. Major brain storming going on through the various posts. Please sort through.
It was my first impression...:)
Good to see that most of the things I addressed can be done through customization!
I am thinking when the image slides in the caption can slide with it. You got it right.
One more thing in regards to that.
What about a content area div tag below the slider which can be linked in with the specific slide. Meaning if I have a video going the div tag below can show info about the video. This can be used as a caption box if one chooses. Slides with the slide.
In this case full screen = 100%.....:) Sorry for the mixup..:) En icon similar to what you see in the image on this page: http://www.codeweavers.com/compatibility/browse/name/?app_id=6580
Click the icon and the image goes into popup. 3 clickable areas in the slide. Icon for popup, thumb icons, image can link someplace.
Keeping the core small with extensions seems like a very good way for the user to pick which extensions they need.
Thank you Mottie! I'll just keep up on the ideas and you can implement those that seem practical.
Hi Paal!
ReplyDeleteI've updated the demo to make the colorbox popup open up with a gallery of images (current slide images). I have also added a line to the notes for Demo #1 to explain how to set it up.
Nice!
ReplyDeleteI am right now not sure what to say. I have two thoughts going on. I can share one thought at a time.
I am working on the new web site: http://easywebdesigntutorials.com/
I am using the Anything Slider to promote sections on the web site. One thing which I have not figured out yet is how to move the content tabs to the left in the CSS. Creating a balance of the location of the right Start button to the corner, and the left Flash button to it's corner.
I am writing comments in the CSS, making it easier for myself to remember what is what. Kinda like making it idiot prof. Even if the code is pretty clear on what is what I am still adding comments...:)
Second thought.
The Adobe tutorials section show a bunch of images with a play button in them. I am looking for ways to click these images and having a popup play the .mov video. I could use Pretty Photo popup but it will require the user to download a quicktime plugin. I have started a process of figuring out what to do. I have e-mailed colorbox asking if they plan on supporting a plugin for Flowplayer or other players, and posted at the Flowplayer forum asking if they plan on helping lightbox popups support their player.
So that's where I am right now.
Hi Paal!
ReplyDeleteCould you e-mail me at wowmotty at gmail dot com :P... it'd be easier than having a conversation in blog comments LOL :P
Love the Anythingslider but there is an issue which several forums are buzzing about, and no one has found an answer: how to make the slider stop HTML5 video playback - not YouTube stuff - when clicking another thumbNav button. You'll get the panel image, but the video is there audibly in the background. How to make it stop playback? thanks!
ReplyDeleteHi Donnac!
ReplyDeleteThanks for the heads up, I'll have to look into this... and learn how to use HTML5's new abilities LOL.
Hi Donnac!
ReplyDeleteI added some code in the Wiki FAQ page, please feel free to spread it to the forums you mentioned. I also made a demo here.
The anythingslider has been a great find! thank you! Is there a way to set the time-delay on a per-slide basis? I'd like to have a longer duration one of the slide panels vs the others... thank yoU!
ReplyDeleteHi Andy!
ReplyDeleteYou can just add an "onSlideComplete" callback to the slider to stop the slideshow, and restart it after a certain delay. Here is how I would do it. See a demo here.
// *** Vary slideshow time ***
var baseSlideShowTime = 500, // time in milliseconds
slideTimes = {
3 : 3000, // slide 2 - baseSlideShowTime + 3 seconds
5 : 500 // slide 5 - baseSlideShowTime + 1/2 second
};
$('#slider1').anythingSlider({
startStopped: false,
width: 300,
height: 200,
delay: baseSlideShowTime,
onSlideComplete : function(slider){
// make current slide last longer in the slideshow
if (slideTimes.hasOwnProperty(slider.currentPage)) {
slider.clearTimer(true); // stop slideshow
setTimeout(function(){
slider.startStop(slider.playing, true); // restart slideshow
}, slideTimes[slider.currentPage]);
}
}
});
@ Mottie:
ReplyDeleteThx a ton for the per-slide delay code, i was searching for something similar and your code showed me the right direction.
I needed complete control over every delay, what I did was altering your code a little bit (example):
var slideShowDelay = 10000; // Fallback
var slideTimes = {
1: 2000,
2: 3000,
3: 4000,
5: 5000
}
--- SNIP ---
onSlideComplete: function(slider) {
slider.clearTimer(true); // stop slideshow
// Change delay time based on saved timings
if (slideTimes.hasOwnProperty(slider.currentPage)) {
slider.options.delay = slideTimes[slider.currentPage];
} else {
slider.options.delay = slideShowDelay;
}
slider.startStop(slider.playing, true); // restart slideshow
}
Thanks Pubmem! I added your version to the FAQ page
ReplyDeleteHi!
ReplyDeleteWas wondering if there was an option to click slide images to go to other html pages? ie each image in the slider becomes a URL link to another page.
Hi Mitchell, just wrap the image in a link. You might then also need to set the image size either inside the image tag <a href="other-page.html"><img src="image.jpg" width="400" height="200"></a*gt; or in the css.
Delete