Page 1 of 4 123 ... LastLast
Results 1 to 10 of 31

Thread: Customizing Image Thumbnail Viewer II

  1. #1
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Customizing Image Thumbnail Viewer II

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    3) Describe problem: The script works great. I would just like to know how to make some changes in how it works out of the box.

    my site: http://paulmirocha.com/portfolio_maps.htm


    If you click on the top right map thumbnail for the North Dakota map, you'll see what I mean. You'll get the main image in the right column <div#imagegallery>. Clicking on that image gives you a third image: detail enlargement . I don't like my design where the enlarged image comes up in a new page in the same window. It is a work-around. What I want is for the enlarged detail to come up in a new blank window.

    Is there a way to alter the script to do that?

    Thanks,

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    In this function of thumbnailviewer2.js, add the highlighted part:

    Code:
    loadimage:function(linkobj){
    var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
    var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
    var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
    var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
    var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
    if (typeof dest!="undefined") //Hyperlink the enlarged image?
    imageHTML='<a target="_blank" href="'+dest+'">'+imageHTML+'</a>'
    if (description!="") //Use title attr of the link as description?
    imageHTML+='<br />'+description
    if (this.iefiltercapable){ //Is this an IE browser that supports filters?
    showcontainer.style.filter=this.iefilterstring
    showcontainer.filters[0].Apply()
    }
    showcontainer.innerHTML=imageHTML
    this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
    this.featureImage.onload=function(){ //When enlarged image has completely loaded
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Play()
    }
    this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
    if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
    showcontainer.filters[0].Stop()
    }
    },
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks. That works! Can I adjust the resulting new window so that it hugs the image and has no chrome etc. Just stripped down. And there's more...And then I want the window to automatically close when the viewer clicks anywhere else. I want it all.

    I know there are scripts that will do this, but I don't know where the <a> element is that I can point that script to.

    If ITNV2 can style the new window that would make it even more awesome than it already is.

    Thanks again.

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Well, instead of using target (in the line I highlighted above), you could use onclick with a window.open function. You could search around here or the internet for more info about window.open. As for closing with when a new image is clicked, not sure about that one.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You don't really want to be opening a new window, all modern browsers can (depending upon their settings) block that. And, getting the proper dimensions to it, unless they are the same for all of your images, would be tricky and/or tedious. Also, there is no way to truly remove all of the chrome, as security features in all modern browsers will prevent that - they require certain minimal chrome, including something that displays the address. This is to prevent phishing via spoofing another site.

    Here's what I would suggest:

    http://www.dynamicdrive.com/dynamici...box2/index.htm

    Simply install that script on your page as instructed in Step 1 on the above page. Put the tags right before the script tag for thumbnailviewer2.js. Download the distribution files and make them available to your page. Then in the thumbnailviewer2.js file, make it like so:

    Code:
    imageHTML='<a href="'+dest+'" rel="lightbox" onclick="myLightbox.start(this);return false;">'+imageHTML+'</a>'
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    palmaroca (05-01-2008)

  7. #6
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thank you John. I like it. I will try that out.

    Paul

  8. #7
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Lightbox looks great from its demo sample. But Hmm, I tried the lightbox code, but I am missing something because I can't get it to work.

    I put the downloaded lightbox files into my root directory and put the links to the lightbox css and script in my header. (BTW, can I put the Lightbox files in their own directory?)

    My understanding ends when I get to the code in my <a> tags in the html. There is already a rel attribute from thumbnailviewer2 in that tag. Here's my <td> htlm:

    <td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
    title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
    <img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>

    TNV2 is already using the href to place the medium sized image in my imagegallery div. How then do I apply lightbox using this medium sized image (resources/images/detail_pages/cornsjourney_det.htm) as the link for lightbox to enlarge the image detail? It's sort of like TNV2 hands off an image to Lightbox, which in turn uses that image as a link to show a third image, a higher res cropped detail from the image gallery image.

    Am I being clear? My old page is at:http://paulmirocha.com/portfolio_maps.htm

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, it would be easier for me to find the problem if you put up a demo of your best effort at doing this with lightbox.

    However, I can already tell you that your code here:

    Code:
    <td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
    title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
    <img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>
    should be fine as is. I would have a space here (highlighted and represented as an underscore):

    Code:
    rel="enlargeimage::click"_rev="imagegallery::resou . . .
    But that probably isn't critical.

    From what you are saying, the problem is probably from not actually making the lightbox resource files available to your page and/or failing to make the modification I outlined to the thumbnailviewer2.js file. Probably the lightbox files availability.

    Like, if you have on your page:

    Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    You should have a folder with your page in it that has three folders off of it:

    css
    images
    js

    The lightbox.css file should be in the css folder, the lightbox support images should be in the images folder, and all of the lightbox many scripts should be in the js folder. In other words, just like in the distribution archive. Your images can stay where they are.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I put a demo site up at: http://paulmirocha.com/testing/portfolio_maps.htm

    Please do not look at the rest of the site, as it will not function properly. Just look at portfolio_maps.htm, and the two image thumnails on teh very bottom--6th row of the thumbnail table: a map of corn distribution and a diagram of an oil spill. These are the test images. I have tried everything you suggested, and checked it twice, but can't find the missing link. The enlarged images still just come up in the parent window and you have to use trh back button to get back to the main page.

    The other thumbnails on that page will work as I originally designed them: not using lightbox.

    Any suggestions?

    Thanks a lot.

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There could be other problems, but the files:

    prototype.js
    effects.js
    scriptaculous.js

    are not where they should be. These actual files should be in the js folder along with lightbox.js. They came with the distribution archive, use them.

    I see another problem, you should be using v2.03a:

    http://www.dynamicdrive.com/dynamici...box2/index.htm

    It is the most up to date for this purpose (2.04 is out, but it isn't as well suited to all you might want to do with this, though it can be adapted, it won't work 'as is' like 2.03a will with your current setup).

    So replace lightbox.js with the file in the 2.03a distribution, and use the other three scripts in the same folder with it. Make folders for and use the updated css and support images that come in the distribution archive.

    Everything else looks in order.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    palmaroca (05-06-2008)

Tags for this Thread

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
  •