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.
22 comments:
Thanks for such a cool Scroll show, can it be customized like the one on washingtonpost.com
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
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 !
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
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
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
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
Just remove the 'easing' option.
As stated above, scrollShow is deprecated. I'd try serialScroll instead.
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
Replace:
navigationMode:'sr',
for
navigationMode:'s',
working, Thanks a lot
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!
Hi Steven
Hard to know without a demo. Remember that this plugin is deprecated.
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
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!
Do you have a demo ?
Note that this plugin is deprecated.
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.
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
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
...............
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
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
Post a Comment To get help prepare a demo.