PDA

View Full Version : % instead of px



mezod
10-29-2010, 05:24 PM
Hi!

i have just discovered this great js http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm and realized that it's almost what i need. I need an image slideshow with attached text per each photography. I wasn't searching for anything sophisticated but this looks really nice (the upper-right example is perfect).
I feel comfortable with changing the timings of it but.. i need to define the size of the pictures in % because it is for a liquid layout...does anyone know if its easy to make such modification? i have no idea of javascript and its hard to figure out if that would carry much work.

Thanks for the website, really helpful.

mezod

Nile
10-29-2010, 06:59 PM
Give this a try (attached).
Then in this little snippet of code, replace the highlighted with the percent (but dont put the % sign):


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in PERCENT. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

mezod
10-29-2010, 07:26 PM
hi, thanks for answering that quickly. I will try your solution as soon as possible, but doing a fast overview..do i need to specify the height % also? My idea was defining only the width so the CSS would do the rest to save the pictures' dimensions. Otherwise i get i'd get some deformed images :p I have found the same problem with other code snippets and don't know how to solve that problem.
I know the idea is a little bit weird but i need to define it using % so the images resize depending on users resolution. It works perfect for static images but the problem occurs when using .js snippets for image rotators.
Now i am in a hurry but i'll try your code soon, i was just posting because i somehow feel im gonna have the same problem with the height :/

thanks again!
mezod

Nile
10-29-2010, 07:36 PM
I did not test this code, so I do not know. But report back with your results and I wil try to help you accordingly

mezod
10-30-2010, 12:19 PM
Hi, i have tried your version but nothing changes. With firebug i can see that the .js still defines the sizes in pixels. Do you think it's possible to do it in %? And also defining only the % for the width, so CSS automatically defines the height?

I'm also working over another simpler version without the text features to see if its possible to do that in .js, only defining the width in %. get easily lost with the fadeslideshow because its quite more advanced, but i'd really like to be able to use it because the text features are great. And also, as in the solution given in this website defines the images in the .js and not in the html code, i think the problem with % in width can be solved. In the other version you define the images in the html code and i think that's why defining only the % width makes it work wrong...

I dont know if you understand my problem :P Thanks again for your time!

mezod
10-30-2010, 01:05 PM
i have modified another version i have found in the net... so you get the idea...i know the pictures' size are to big atm its just so understand it... if you change the browsers window size you'll see the image resize automatically, that's what i need.
I was initially planning to put the text attached to the picture outside, but i dont really know how to do it now...
hope this example explains better what ive been trying to explain! :p
thanks!

Nile
10-30-2010, 11:32 PM
Okay, sorry :o. Wait - so are you still using this script, or are you using a different one?

mezod
11-09-2010, 06:31 PM
hi Nile, sorry for taking so long to answer. At the end i ended up using another one and modifying it myself...but i still have a problem hehe...working with liquid layouts is hard!
just thanks for your time =)