Tuesday, October 30, 2007

jQuery.ScrollShow

I've made a new plugin, that supercedes this one.
Please check jQuery.SerialScroll.
It's very small and offers high customizability, can be used for slideshows, site navigation, news tickers, etc. (These 3 exemplified in the demo).

jQuery.ScrollShow is a very customizable slideshow, that relies on jQuery.ScrollTo, to slide(scroll) the items. Documentation is included in the source file. The plugin is still in beta stage, but will be soon (hopefully) stable. Feedback and bug reports are very welcome.

Links

22 comments:

Zeeshan said...

Thanks for such a cool Scroll show, can it be customized like the one on washingtonpost.com

Ariel Flesler said...

Hi Zeesham

Sure you can, it's pretty easy, but I'd recommend you to use jQuery.SerialScroll instead, this plugin doesn't get any more updates.
You have a similar case in serialScroll's demo, you only need to set the 'step' option to 3 and 'cycle' to true.

Cheers

Rahul said...

Hi Ariel,

First of all thank you very much for the script :)
Its really awesome and I have customized it to my needs also...
I just want to ask that how can I make the images click able ?

Like I want to make it a navigation so the images needs to have URLs...
But right now when I click on the image it takes me to the next one....how can I switch it to URL ?

Sorry for the dumb question, I'm very good in html and designing but a noob in Javascript :(

Thanks again !

Ariel Flesler said...

Hi Rahul

You need to change the option 'navigationMode' to just 's'. And put in 'navigators' a selector that matches both prev/next (if that's your case).
Also, if you already create the links, set 'wrappers' to ''.

Note that this plugin doesn't get any more updates.
I'd advice you to use SerialScroll instead, the link is in the message above.

Cheers

Rahul Gupta said...

Hi mate,

Thanks a lot for your reply :)
Really appreciated ;)

I have done what you said and YAY is works :D

I have to look I wanted and it looks and works awesome :)

Tho as you said that SerialScroll is better....I really want to change it to that but I don't know how to use it...I have already customized the current one so I don't want to do that again.....How can I just change the script to SerialScroll from Scroll show ?

Thanks....please take your time to reply....I'm in no hurry :)

Take Care

Ariel Flesler said...

Hi Rahul,

I'm glad it worked, I think SerialScroll is the most documented plugin I made, it's really easy to implement.
The demo has 3 examples, one of them is a slideshow, it shouldn't take you long to adapt the settings.
Cheers

DoruDM said...

Hi,
Thank you for this.
Could you tell me please how could I eliminate that bounce effect of the pictures?
I will like to simple slide without that bounce.

THank you

Ariel Flesler said...

Just remove the 'easing' option.

As stated above, scrollShow is deprecated. I'd try serialScroll instead.

DoruDM said...

thanks
I've got what I've wanted by doing this:
$.easing.backout = function(x, t, b, c, d){
var s=0.30158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
};

I want now also to use lightbox or thickbox on the same page, but it doesn't works.
The slide works but lightbox/thickbox don't. Do you have any idea on this?
Thank you

Ariel Flesler said...

Replace:

navigationMode:'sr',

for

navigationMode:'s',

DoruDM said...

working, Thanks a lot

steven said...

Hi Ariel,
Thansk for your scroll. But, when i test the demo file with one image, it occur an error in jquery.js file at line 11. How can i fix this?
Thanks a gain!

Ariel Flesler said...

Hi Steven

Hard to know without a demo. Remember that this plugin is deprecated.

deborah said...

Hi, Thanks so much for the gallery its great! My question is similar to rahuls I want to make the images active...


Is this possible... Thanks

deborah said...

I have change the function to:
navigationMode:'s',

I am not sure what you mean by selectors... is it the active link itself...
li id="view"
ul id="images"
liahref="http://www.google.com"Page2.aspximg class="imgPlacement" alt=""src="images/mortgages.jpg"a li

I have it like this but when I click on it is says Requested URL: /FlesherGallery/undefined.

Any help much appreciated!

Ariel Flesler said...

Do you have a demo ?
Note that this plugin is deprecated.

P.Ram sankar said...

FILE NAME: index File or what file u r loading the images...

Use this format while using img tag
dont use anchor tag at your own
use this format

img src="images/img1.jpg" lowsrc="http://www.google.com"
img src="images/img2.jpg" lowsrc="http://www.srisoftwarez.com
img src="images/img2.jpg" lowsrc="http://www.yourdomain.com"



FILE NAME : jquery.scrollshow.js

SEARCH THIS LINE and COMMENT IT

return $els.wrap('a target="_blank" class="jq-ss-link">').parent().each(function(){
this.href = this.firstChild.src;


ADD THIS LINES THERE

return $els.wrap('a target="_blank" class="jq-ss-link"').parent().each(function(){

this.href = this.firstChild.lowsrc;



SEARCH THIS LINE and COMMENT IT

$(this).bind( 'click', { pos: Math.floor(ratio*pos) }, random ); If u feel probs in fixing this mail me ramsankar2007@gmail.com i will help u.

Roy said...

hi, I had followed P.Ram sankar answer:
///////////////////////////////////
FILE NAME: index File or what file u r loading the images...

Use this format while using img tag
dont use anchor tag at your own
use this format

img src="images/img1.jpg" lowsrc="http://www.google.com"
img src="images/img2.jpg" lowsrc="http://www.srisoftwarez.com
img src="images/img2.jpg" lowsrc="http://www.yourdomain.com"



FILE NAME : jquery.scrollshow.js

SEARCH THIS LINE and COMMENT IT

return $els.wrap('a target="_blank" class="jq-ss-link">').parent().each(function(){
this.href = this.firstChild.src;


ADD THIS LINES THERE

return $els.wrap('a target="_blank" class="jq-ss-link"').parent().each(function(){

this.href = this.firstChild.lowsrc;



SEARCH THIS LINE and COMMENT IT

$(this).bind( 'click', { pos: Math.floor(ratio*pos) }, random );

/////////////////////////////

and I add
//////////////////////////////
$('#images li a').click(function(e){
e.stopPropagation();
});
//////////////////////////////

to init.js, it works great in FF,Chrome, Safari, but it just doesn't work in IE, no event was triggered when click on the image. Can anyone help pls

Cheers

raj said...

Hi Ariel,
Thanks for such cool stuff, its amazing really.Visited http://flesler.blogspot.com/2008/02/jqueryserialscroll.html too, but still I prefered the Scollshow.
I have customized it for my needs to some extent, but scrolling not working for new element (say p tag or span) inside the #images li I added.
I am customizing it for the Columnists part (images on the bottom right side images) on http://moneylife.in/
I am looking to have all those descriptive text content for the particular images to scroll when that image scroll too.
Have a look at the such small text I added in the below customized code & the css for it.

#images li p{
border:1px solid green;
width:110px;
padding-top:100px;
position:absolute;

}


li id="view" style="height:200px;width:310px;"

ul id="images"
li img src="images/img1.jpg"

p This shuld scroll /p

li

li img src="images/img2.jpg"
p This shuld scroll2 /p

/li
...............

Balaji.V said...

hi ariel,

thanks for such cool scroll show. can i able to customize this.i want add image dynamically to scroll screen. i wrote to add dynamically image to this scroll but its not working when click on the right/left side arrow

its show error message "undefined is null or not an object"

Thanks,
V.Balaji

Ivo Barbosa said...
This comment has been removed by the author.
Ivo Barbosa said...

Hi Ariel, whow make your plugin to disable thumbs navigation, i want make navigations only in arrows left and right, i want to click in thumbnails image and image apear in large size like popup, i use fancybox to apear, can you help me?thanks
Ivo Barbosa