Help to edit following code

[chitrag]

I want to use following code in my site. My content area of page is 600px and want position it correctly in my site. I made it but it does not work. http://www.egtours.com/test.php Content Slider Code /* http://www.menucool.com */#sliderFrame {position:relative;width:600px;margin:0;}#slider { width:600px;height:228px;/* Make it the same size as your images */ background:#fff url(loading.gif) no-repeat 50% 50%; position:relative; margin:0; box-shadow: 0px 1px 7px #999999;}#slider img { position:absolute; border:none; display:none;}/* the link style (if an image is wrapped in a link) */#slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%;}/* Caption styles */div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:600px; height:auto; padding:0; left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/ top:270px;/*if the caption needs to be aligned from bottom, specify by bottom instead of bottom. i.e. top:150px;*/ z-index:3; overflow:hidden; font-size: 0;}div.mc-caption-bg { background-color:transparent;}div.mc-caption { font: normal 12px/16px Verdana; color:#333; z-index:4; padding:10px 0; text-align:left;}div.mc-caption a { color:#09F;}div.mc-caption a:hover { color:#06C;}/* ------ built-in navigation bullets wrapper ------*/div.navBulletsWrapper { display:none;}/* --------- Others ------- */#slider{ transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0);}

[niche]

Sorry for taking so long. Specifically, what are you unhappy with?

[chitrag]

Everything all right but the thumbnail goes to below large image. Actually it should be on the right hand side as example here http://menucool.com/slider/jquery-slideshow

[niche]

position it with float:right instead of using positioning.

[chitrag]

Thank you for your help. It works better than before but still not satisfied. Since, example here I am wondering which variable should I need, is it css issues or js issues ? There are two css files with this slide slow.

[smiles]

The only difference between yours and example that affect smoothness is the Description part, it changes while gallery's images slidingTry to find out the animation function and put in another function that run when animation ends $('...').animate({[some css attributes]}, [duration], function(){ //animate stop here, then changes Description here})

[chitrag]

Thanks, but it is in .js file or in .css file to edit ? I am really newbie

The only difference between yours and example that affect smoothness is the Description part, it changes while gallery's images slidingTry to find out the animation function and put in another function that run when animation ends $('...').animate({[some css attributes]}, [duration], function(){ //animate stop here, then changes Description here})

[smiles]

Nope!!! I see it again, smooth now, .js in minimized version so can't be edited, your config code for slider is the same as example, your css just to put the elements in the right place, no effect on smoothness. I see no problem now, sorry to confused you

[chitrag]

so far I have fix the issues. But it looks fine chrome, firefox but in IE8 it does not show up navigation below large image

Edited August 30, 2012 by chitrag

[smiles]

Because the #slider's width always be set with the same size as original width of the big images, so I think u have to design your images with the fix width (see below, 390px) temporarily, in .css div.mc-caption-bg, div.mc-caption-bg2 -> add width: 390px; #slider -> add width: 390px; (also, overflow: hidden)

[smiles]

Well!!! SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7 You may check this link http://prasadblog.blogspot.com/2009/11/prototype-eventfire-exception-to-be.html

[chitrag]

what to do with that ? Need to add some code or delete something ?

[smiles]

just surround element.fireEvent(event.eventType, event); by try catch try { element.fireEvent(event.eventType, event);} catch (error) { // error here maybe fireEvent not allow the second argument. element.fireEvent(event.eventType);}