chitrag Posted August 20, 2012 Share Posted August 20, 2012 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);} Link to comment Share on other sites More sharing options...
niche Posted August 26, 2012 Share Posted August 26, 2012 Sorry for taking so long. Specifically, what are you unhappy with? Link to comment Share on other sites More sharing options...
chitrag Posted August 28, 2012 Author Share Posted August 28, 2012 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 Link to comment Share on other sites More sharing options...
niche Posted August 28, 2012 Share Posted August 28, 2012 position it with float:right instead of using positioning. Link to comment Share on other sites More sharing options...
chitrag Posted August 29, 2012 Author Share Posted August 29, 2012 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. Link to comment Share on other sites More sharing options...
smiles Posted August 29, 2012 Share Posted August 29, 2012 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}) Link to comment Share on other sites More sharing options...
chitrag Posted August 29, 2012 Author Share Posted August 29, 2012 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}) Link to comment Share on other sites More sharing options...
smiles Posted August 29, 2012 Share Posted August 29, 2012 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 Link to comment Share on other sites More sharing options...
chitrag Posted August 30, 2012 Author Share Posted August 30, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
smiles Posted August 30, 2012 Share Posted August 30, 2012 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) Link to comment Share on other sites More sharing options...
smiles Posted August 30, 2012 Share Posted August 30, 2012 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 Link to comment Share on other sites More sharing options...
chitrag Posted August 30, 2012 Author Share Posted August 30, 2012 what to do with that ? Need to add some code or delete something ? Link to comment Share on other sites More sharing options...
smiles Posted August 31, 2012 Share Posted August 31, 2012 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);} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now