Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unique solution to an image gallery problem needed

    I need to be able to specify an image swap on the click of a link

    No problem there, tough there are a variety of way to do it - I chose to pass the variable in the URL

    javascript:imagetoswap.src='pathto/someimage.jpg'

    I need to have the image that is swapped clickable to popup a larger image

    Right now the larger image is named the same as the smaller image with the prefix of b-

    So ideally what I need is the ability to specify the first (small) image name variable and have the image src of the larger image calculated (add the prefix) and (ideally) dynamically inserted into the popup that is generated

    that can be divided into two sections -

    First calculate the new image name *or* define the image name in the original link (more work!)
    Second - create the pop up and write the image src info (also the popup needs to have a 'close' text link - thi could be an existing hardcoded html page that one then specifies the .src of a dummy image or written 'on the fly'

    All popups are one size - though would it be nice to have them resize to the image :-)

    These sections are where I am having problems finding the easiest solution.

    As for deployment, would prefer to use as an external .js file and because it deals with over 250 images (plus >250 of their enlargements) I wouldn't want to have to type all of them in more than once (not too worried about preloading and as there can potentially be more than 40 on one page it's not recommended)

    All and any help appreciated, and if necessary this could be a consulting (paying) gig for the right (and bullet proof) solution.

    TIA

    Grant

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    if i am understanding you correctly this is what you want.

    this is a function for opening a popup with the an image with an image that has an added prefix of b- from the parameter used in executing the funtion (this is put in <script> tags in the head of document)

    function popBimg(imgsrc) {
    var bimgsrc = imgsrc.replace(/(\w+.gif)/, "b-$1")
    var x = window.open()
    x.document.write("<body><img src=" + bimgsrc + "></body>")
    }

    and basically to use it would have the image that gets swapt in a link send its srs of the image to the function...

    like this

    <a href="javascript&#58;popBimg(document.getElementById('id name').src)"><img id="id name"></a>
    Kris Hubby
    kwhubby site

  • #3
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mmm

    I'm sure this does make sense, but I must be a little dense to get it's application correct as I haven't been able to adapt this to the use that I need it for.

    If you are available for some consulting work please email me grant@simmonet.com

    thanks

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    why not post what u are trying to do with my script.... show us an example... that way we may be able to help
    Kris Hubby
    kwhubby site

  • #5
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Example

    http://www.rwlm.com/catalog-test.html

    I am using some different code that I originally develped that works fine in Apple's Safari, but not in IE Windows / Mac so obviously it's no good!

    I took a different approach that required more typing (entering both image name variables) in the original links which is not a bad idea but doesn't cover someone clicking on the 'enlarge image' before clicking on a specific link.

    My ideal *ideal* final output would be to open a blank window and write the popup dynamically so that th 'big' image is centered and that a 'close window' text link is also included in the page

    For clarity I included the normally external code in the page...

    Thanks

    Grant

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    dont do that approach... ill convert your page to use my methode..
    Kris Hubby
    kwhubby site

  • #7
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solution

    Anything that gets this working is appreciated, and depending where you are there's a dinner on me at the least...

    Thanks for your help...

    Grant

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    i modified that page... to make it simpler and use my method... here it is... (u do have to remove that extra .txt extension on the file name, to make it simply .htm) also.. the urls there arnt correct unless u post it directly to were ur page were the example was
    Attached Files Attached Files
    Last edited by kwhubby; 10-14-2003 at 05:06 AM.
    Kris Hubby
    kwhubby site

  • #9
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still doesn't appear to work

    First off, I'm on a Mac so it may just be that, BUT it 's not working...

    I'll post a page and you can tell me if it's works for you then I'll know for sure it's an IE Mac issue

    Thanks

    Give me 5 mins to post

    http://www.rwlm.com/test02.html

    grant

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    the problem is at


    <a href="#" onClick="popBimg(document.getElementById('tbi').src)"><img src="product/lullaby/lul-puppies-oneinbox.jpg" name="product" width="239" border="0"></a>

    u need

    <a href="javascript&#58;popBimg(document.getElementById('product').src)"><img src="http://www.rwlm.com/product/lullaby/lul-puppies-oneinbox.jpg" name="product" width="239" border="0" id="product"></a>


    u changed the name.... so tbi does not exist...
    Kris Hubby
    kwhubby site

  • #11
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Missing id atribute

    THANK YOU THANK YOU THANK YOU

    Now I just have to recode the links and all looks like it is working to spec

    I can't thank you enough.. do you have an Amazon wish list or something?

    Cheers

    Grant

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    your welcome simmonet!... its my pleasure to help.

    ps... if you have any gif images u want to use instead of just .jpg change this line

    var bimgsrc = imgsrc.replace(/\/([A-Za-z0-9_-]+.jpg)/, "/b-$1")


    to

    var bimgsrc = imgsrc.replace(/\/([A-Za-z0-9_-]+[.jpg|.gif])/, "/b-$1")
    Last edited by kwhubby; 10-14-2003 at 06:34 AM.
    Kris Hubby
    kwhubby site


  •  

    Posting Permissions

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