Where can I find a jQuery article rotator / carousel / slider? - php

I want to make an article rotator similar to http://www.vmagazine.com/
And I want to use jQuery.
I know there are carousels like jCarousel and jQuery Carousel.
There is also the Coda-Slider, but I don't fint it very elegant.
Can anyone suggest a good jQuery method / script for having an article carousel?
I don't want to use MooTools, Prototype etc. since I'm already using jQuery.
Any suggestions anyone?

Check out Flowplayer's Scrollable PLugin: http://flowplayer.org/tools/scrollable/index.html#demos
I haven't used it, but I believe you can set it to auto-scroll.

Related

slideshow banner without using flash

I want to make a sort of repeating slideshow banner for my website, but i need some help on how to do it. The best example of what i want is on the play.com website, they have a banner that has 5 different slides, the site scrolls between them after X amount of time but the user can also click on one of the numbered buttons at the bottom of the banner to skip.
I'm thinking of doing this using HTML, CSS, JavaScript, AJAX and PHP. I have an Ajax script set up already linking to a php page that will at somepoint check through a database to get its content. But i want to output everything using lists lu and li.
So does anyone know of any tutorials or something i could use to get something like on play.com? play.com is more or less and exact match to what i want.
Thanks for the help.
You can use jQuery in combination with slideshow plugins. You don't have to do much by yourself. A plugin which does what you want can be found here:
http://slidesjs.com
You can also search Google for "jquery slideshow". This should return lots of pages with plugins.
I use http://jquery.malsup.com/cycle/ as it has a very basic fade but also lots of different animations if needed.
Unless you have a good reason for it, there's no need for you to create the slider yourself, there are tons of options already made (and tested).
I often use this two:
http://nivo.dev7studios.com/demos/
http://jquerytools.org/demos/scrollable/index.html
here is a really simple one that loops through any number of <img> elements placed inside a <div class="slideshow"> wrapper and it only uses a few lines of jQuery and css...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
hope this helps someone else

Embeddable widget showing products from a e-shop API using JS slider

I need to develop an embeddable widget which has to look something like this:
<div id="my_widget" data-api_key="xxx" data-shop_id="xxx"></div>
<script type="text/javascript" src="my_widget.js"></script>
The API Request must be in PHP implemented. I have to show the three more sold products for the shop by id data-shop_id.
I'm ok with the PHP coding, my problem is how to implement that my_widget.js and how to integrate it with a jQuery slider. And how do I use that data-api_key and data-shop_id labels in the PHP?
It would be OK to use <iframe> or is better pure JavaScript?
Sorry if it sounds a bit confuse, I'm still wondering how to do it. If you know some tutorial about how to implement a widget using PHP + JavaScript, I'd be pleased.
I think the easiest way would be to use an iframe.
Although you could use jQuery to post the data-shop_id and then receive the results as JSON and process them.
jQuery access data attribute - $(this).data("shop_id")

Should I custom build an photo gallery or tweak an existing one?

I have the task of creating a full screen image/photo gallery with 'collections'. Basically the site will start out on a collection and move to the next (or can be switched by drop-down navigational element) with each collection separated by a simple loading/title screen that fades out after it loads.
It will have a very simple UI:
logo
simple menu with collections selection and a few links.
collapsible photo caption.
botom bar:
[ viewing: collection_name < 2/12 > hide UI]
I have searched for a jquery plug-in that might make my life a bit easier but I haven't really seen anything that may work/be tweaked to suit these requirements.
Do you know of any plug-ins that will make this easier?, How should I handle the 'collections' and the loading of them?
Gallery3 will already handle all of the photo organization and manipulation. You can modify the Smarty templates to add the specific UI elements you require that may not already be present.
Have a look at JAlbum.
http://leandrovieira.com/projects/jquery/lightbox/
Use jquery lightbox if you want to do it quickly.

Simple slideshow with navigation

I need help making a simple slideshow to display images with a simple navigation. I do not want anything flashy - just a basic slideshow with a previous/next navigation and text that displays what number the image is out of the total images. I would also like it to fade into the next image if possible.
This is for a portfolio website and I have seen it done on many others but I cannot create a working code nor find a similar code anywhere. Thank you!
Take a look at http://jqueryfordesigners.com/jquery-infinite-carousel/
There are plenty of other examples out there, as well, like http://sorgalla.com/jcarousel/ (mentioned in the above link and pretty popular)
Here is a sexy slideshow jquery plugin my friend:
http://www.slidesjs.com/
jQuery Lightbox
http://leandrovieira.com/projects/jquery/lightbox/
Use the Cycle plugin (jQuery) with the pager option:
http://jquery.malsup.com/cycle/int2.html

Slideshow on events calendar site

I am currently developing an events calendar application using ASP.NET MVC and SQL Server and I would like to know how the slideshow for events works on this site - (http://eventful.com/houston/events).
What technologies are involved? Please advise.
Simply put it would involve JQuery, and the use of JQuery's ajax helping methods. You would have to return a list of event from a controller action, as JSON perhaps and then have some JQuery code to render them into a slide show.
There may be quite a few plugins out there that achieve what you are looking for, i sugest doing a search on the JQuery plugins site.
Thanks,
Alex.
I thinks the best way to use slideshows is the jquery slideshow. You can find more articles and examples on this topic.
www.webanddesigners.com/15-jquery-slideshow-and-plugins

Categories