SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Help: modifying scripts

    Hello, here is the link to a photo viewer: http://www.yourate.co.nz/public/viewer/

    I'm just wondering is it possible to replace the index links text (in top left corner) with the thumbnail images. The images needed have been uploaded to the server. But I have no idea how to make changes to the photo_viewer.js so that it will work.
    http://www.yourate.co.nz/public/viewer/photo_viewer.js

    The other question is when adding a photo by changing the photo_list.js, I would like to be able to add a dynamic path like 'images/{image01}' so that the auto generated images can be displayed properly. At the moment, the photo_list.js won't support {this}.
    http://www.yourate.co.nz/public/viewer/photo_list.js

    I have very limited knowledge in Javascript, so any help would be much appreciated. Thank you!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The initPhoto() function uses the following code to create an image.

    Code javascript:
    imgString += "<img border='0' id='mainImage' src='"+ photos[glbCurrentPhoto-1] +"'";
    if (imageALT == true) {imgString += 'alt="'+captions[glbCurrentPhoto-1].replace(/"/g,"'").replace(/<[^>]*>/g,"")+'"';}
    imgString += ">";

    As there are no actual thumbnails available, we'll have to create our own by using the same code and keeping the width of the image restricted.

    The buildIndex() function creates the index that you want to change. The following code is used to create the index links

    Code javascript:
    if (i == glbCurrentPhoto) {
        indexString += '<b>' + linkNames[i-1] + '</b>';
    } else { // Make all other numbers links
        indexString += '<a href="javascript:void(showPhoto(' + i + '));">' + linkNames[i-1] + '</a>';
    }

    What it appears is needed is for the linkNames[i-1] to be replaced with the image code, and have a width defined to keep them at thumbnail size.

    How do we indicate the current photo though? You can't make an image bold, but you can make it slightly bigger.

    Code javascript:
    if (i == glbCurrentPhoto) {
        indexString += '<img border="0" id="mainImage" src="'+ photos[glbCurrentPhoto-1] +'" width="100"';
        if (imageALT == true) {indexString += 'alt="'+captions[glbCurrentPhoto-1].replace(/"/g,"'").replace(/<[^>]*>/g,"")+'"';}
    indexString += '>';
    } else { // Make all other numbers links
        indexString += '<a href="javascript:void(showPhoto(' + i + '));">';
        indexString += '<img border="0" id="mainImage" src="'+ photos[glbCurrentPhoto-1] +'" width="80"';
        if (imageALT == true) {indexString += 'alt="'+captions[glbCurrentPhoto-1].replace(/"/g,"'").replace(/<[^>]*>/g,"")+'"';}
    indexString += '>';
        indexString += '</a>';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi pmw, thanks for your help! It's great because the index links are showing with the thumbnails now. However, it shows only the same thumbnail in all positions. How can I fix it?

    Here's the link: http://yourate.co.nz/public/viewer/
    Last edited by pedalcars; Apr 29, 2008 at 18:13.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Try using i-1 instead of glbCurrentPhoto-1
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works! Thank you!


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
  •