Javascript - Slideshow2

Discussion in 'Web Design and Development' started by CANEHDN, Feb 2, 2009.

  1. CANEHDN macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #1
    I'm trying to modify Slideshow2 http://code.google.com/p/slideshow/.
    I have 2 questions.
    1: The site I'm developing for has their files as: "1.JPG" and the thumbs as "t_.jpg". How do I make the replace: [] line to match this?

    2: I also need to resize the thumbs a little more to fit the thumb gallery. I can't find where to do this.

    Any help would be much appreciated.
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Try this!

    1. If I read the docs correctly, this script generates the thumbnails and their names automatically (i.e. large pic 8.jpg as defined in the data array you modify becomes 8t.jpg thumbnail at runtime) - so you don't actually include any references to thumbnails you might have created. Let it do all the work (it will properly scale the images for you, if it works properly). Otherwise show me in the docs where "replace" is used? Not sure what you mean.

    2. In slideshow.css:

    Find:

    .slideshow-thumbnails img{display:block;}

    Change to:

    .slideshow-thumbnails img{display:block; height: ?px; width: ?px} /* replace ? with desired numeric value for each */

    If that does not work, add the height/width properties in the same manner to: ". slideshow-thumbnails li" - this script uses the old unordered list method to format the display of each thumbnail via CSS so I'm pretty sure the li (list item) part refers to each thumbnail.

    Both classes seem to affect the styling for the thumbnails. I've not used Google's version of this before, so all this is a best guess.

    -jim
     
  3. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #3
    Pure genius. The image resize works perfectly. The other issue is regarding the default image values. If the full size image is "/images/test/1.JPG" this app looks for the thumb "/images/test/1t.JPG". I need it to look for "/images/test/t_1.jpg". It's just the file structure the client has. In the slideshow.js file there is a line :
    replace: [/(\.[^\.]+)$/, 't$1'],

    What do I need to change here to have it change the extension to lower case and add the t_? Thanks again for your help.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    If you are only working with jpg files I believe the following will give you the right results.
    Code:
    [/.*\/(\d+)\..*$/, 't_$1.jpg']
    If you have other image types like gif in there as well, then you can try,
    Code:
    [/.*\/(\d+\..*)$/, strtolower('t_$1')]
    Below is what I was testing with,
    PHP:
    <?php
    $str1 
    '/images/test/12.JPG';
    $out1 preg_replace('/.*\/(\d+\..*)$/''t_$1'$str1);
    echo 
    strtolower($out1);
    // output: t_12.jpg
    ?>
    If neither of these is outputting correctly let me know what results are coming out and what should be coming out instead.
     
  5. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #5
    Geniuses. That's all I can say. Thanks for the help guys. It works beautifully. You deserve some ice cream.
    Thanks again.
     

Share This Page