Results 1 to 8 of 8

Thread: % instead of px

  1. #1
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default % instead of px

    Hi!

    i have just discovered this great js http://www.dynamicdrive.com/dynamici...nslideshow.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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Give this a try (attached).
    Then in this little snippet of code, replace the highlighted with the percent (but dont put the % sign):
    Code:
    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: ""
    })
    Jeremy | jfein.net

  3. #3
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 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

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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
    Jeremy | jfein.net

  5. #5
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!
    thanks!

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Okay, sorry . Wait - so are you still using this script, or are you using a different one?
    Jeremy | jfein.net

  8. The Following User Says Thank You to Nile For This Useful Post:

    mezod (11-09-2010)

  9. #8
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 =)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •