Discussion on jQuery Slice Banner Slideshow with Captions

Tean

Tean supports this item

Supported

This author's response time can be up to 2 business days.

32 comments found.

awesome stuff Tean. Keep up the great work :)

very nice, just one thing

Can you disable the extra horizontalscroll bar that appears when the blocks move of screen this

also would it be an option to have the caption be animated seperately just as your stack banner?

In what browser?

I am not getting this in firefox.

firefox 5 here

I have firefox 5, I am not getting this.

In either case, this is just the css. Either set overflow hidden on the element scrollbar appears, or increase the width/height on that element for scrollbar not to appear.

If the horizontal scrollbar appears then the width needs to be increased.

That’s pretty cool! Bookmarking for sure!

Thanks all!

Very cool effect !

I wonder how you manage to cut captions !

Thanks Huitre!

Its magic :P

V-nice :)

Thanks!

Stay tuned, I am going to updated this in the next couple of days adding custom content option to slides like vimeo/youtube etc…

Awesome item Tean! Very Flashy :)

Thanks!

Hi,

Are thumbnails created on the go (from main image), or do I have to provide them?

PS. Awesome script, thinking about including it in my next theme.

Kind regards

tomsky

Maybe the way this was constructed, which wasnt really elegant, but I wanted something cool flash like and since javascript doesnt have bitmap manipulation like flash (to cut/slice.. etc bitmap pictures) I simply masked each slice with new div and overflow hidden.

Thanks for your answer. Another question:

Can I get rid of easing? and apply fade for example? I’ve noticed when easing on an iPad or iPhone, its doesn’t display properly and causes extra width to the right.

eases are defined in settings in html page.

you could put ‘linear’ instead.

how do you mean fade?

This is transition, not ease.

Hi just purchased… great work!

Just wondering if its possible to place a link on slides without any captions?

Thanks for the purchase!

Currently no, but I can make you this on custom basis for some fee.

Contact me on my email if you are interested.

Hello! Love Ths Script! Really did not have to change the code to do what I wanted it to do. The only thing is that I noticed the location of my slider is perfect in Google Chrome, but about 50px higher in IE8 and Firefox. How do I get it so that its in the same position for all three browsers. Thanks again for an awesome script!

Eric

What css did you use to position main component holder (sliderWrapper) ?

Thanks for the response, here is the code:
/* component holder, adjust caption font size here /
#sliderWrapper{
position:absolute;
top:50%;
left:50%;
/
background:#ddd;*/
width:590px;
height:300px;

margin-left:-445px;
margin-top:-50px;

font-family: “YanoneKaffeesatzRegular”, Geneva, sans-serif;
font-size: 30px;


}

The only thing I changed from the original code I think was the margin left and the margin top…thanks!

With respect to my post about, I should have given you the web link so you can see what is going on…thanks!

http://www.essexcinemas.com/throwbackthursdaysslider.php

Thanks Again!

I see what you mean. Its hard to tell this way, but why dont you position component on exact top/left position. I used 50% because it was centered into the page, but you have specific position as I see it.

Thanks again for the quick response! I am not sure exactly what you mean though. Would I get rid of the top and left code or would I put an actual location in there? Thanks!

Something like left:50px; top:100px;

Bingo! That did the trick…thanks for the help and the awesome script!

No problem!

Hello again, I posted this a couple of days ago and thought it worked. But I found out that if I view it on a wider browser screen the slider is all over the place. How do I get it to remain in the same place within the page but adjust for wider screen browsers…thanks!

#sliderWrapper{ position:absolute; top:450px; left:850px; /background:#ddd;/ width:590px; height:300px; margin-left:-445px; margin-top:-50px; font-family: “YanoneKaffeesatzRegular”, Geneva, sans-serif; font-size: 30px;

}
You can see an example at www.essexcinemas.com/throwbackthursdays.php – thanks again!

Have you tried removing margins?

Thanks for the response. When I remove the margins, the slider moves way away from the position I have set (top:450px; left:850px). First do I need to change position:absolute to position:relative? And if I remove the margins, should I try placing the slider at a different top and left position? Thanks again!

I dont know how you want your slider positioned, its up to you.

These are the basics of css.

Hello Tean, my css knowledge is not that good and that is why I am having a problem. If you view http://www.essexcinemas.com/throwbackthursdays.php on a regular computer screen, the slider is in the perfect location, which I believe is top450px left850px, but if you expand to a larger screen, the slider is nowhere near where it is supposed to be positioned in the page. I just want the slider to remain in the same place in the page even if you expand to a larger browser view. Thanks!

Well it also depends on some css properties of the parent in which you placed the whole component. If you set position absolute and exact css top/left then is should stay put. What are the css properties of you parent?

I like this slider and plan to include in next theme.

Thanks for the comment!

Hi,

Love the slideshow, however I’m having a problem with lines appearing across the screen and my vertical scrollbar has disappeared.

You can see the demo here http://www.dev17.ucmzone.com/index2.html

Any help would be much appreciated.

Thanks

Hi!

for the scrollbar, check in the css file:
body{
    overflow:hidden;
}
remove this oveflow.

As for he lines, I cant see that, can you make me the screenshot?

Thanks

by
by
by
by
by
by