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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    overlapping image viewer - on click?

    Overlapping Image Viewer Script
    http://www.javascriptkit.com/script/...geviewer.shtml

    It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect.

    But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size.

    It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side.

    Thank you for your time .... viki barefoot
    Last edited by vkbarefoot; 03-20-2009 at 05:13 PM. Reason: left something out

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    change the onmouseover to onmouseclick

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping Image Viewer Script

    Thank you for your suggestion, however neither of those strings appears in either of the scripts or the code on the page.

    And I would still like to move the pop up of the larger image down about 25 pixels.

    Thank you .... viki barefoot

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Probably because it is mouseover, not onmouseover... though the change is pretty much the same... should work with mouseclick. As to moving it down 25 px... add the following line(marked in red):

    Code:
    $('#jkpopupimage').one('load', function(){
                    var popupdiv=config.$popupdiv.get(0)
                    targetcoord.left=(windowsize.w < targetcoord.left-scrollpoint.x+popupdiv.offsetWidth)? targetcoord.left-popupdiv.offsetWidth+$target.width() : targetcoord.left
                    targetcoord.top += 25;
                    config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible'})
                })
    And that ought to do the trick. Haven't tested it, so... let me know if it doesn't work for some reason.
    Last edited by Eldarrion; 03-20-2009 at 06:59 PM.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Quote Originally Posted by Eldarrion View Post
    Probably because it is mouseover, not onmouseover...
    Never mind that. After some more careful looking... it is mouseenter and mouseleave and the bind is 'click' instead of 'mouseclick' Of course, the main problem you'll be facing then is... that you can't bind two distinct events on mouseclick without some way of tracking which click it is. I'd suggest you alter the init function to look as follows:

    Code:
    init:function(config){
            $(document).ready(function(){
                config.$thumbnails=$('.'+overlapviewer.thumbclass)
                config.$popupdiv=$('<div id="overlappopup"></div>').prependTo('body')
                config.$thumbnails.each(function(index){
                    $(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
                    $(this).bind('click', function(e){
                        if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
                            overlapviewer.dim_and_reveal(e, this, config)
                    })
                }) //end each loop
                config.$popupdiv.bind('click', function(e){
                    config.$thumbnails.stop().fadeTo('normal', overlapviewer.startopacity)
                    config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})
                })
            }) //end document.ready
        }
    Which will in turn make it show and hide the image... show when clicking on the originator, hide when clicking on the pop-up. Of course, if the image is shown and you click on the originator again, it will hide and reshow all over... probably a better way to do that is by using live and die and binding the events accordingly, but... coding such will require the complete alteration of the script.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And here is an onclick code (I think much simpler than what you're using and it's also... copyright by me, so... you won't need that annoying comment at the top where it says: "created by javascriptkit"):

    Code:
    $(document).ready(function() {
    	showy();	
    })
    
    function showy() {
    	$(".jkimagelarge").live('click', function() {
    		$(this).fadeTo("slow", 0.5);
    		var what = $(this).attr("title");
    		var showy = "<img src=' " + what + "' id='overlappopup' />";
    		$(this).after(showy);
    		var position = $(this).position();
    		position.top += 25;
    		position.left += 15;
    		$("#overlappopup").css({"top" : position.top, "left" : position.left});
    		$("#overlappopup").fadeIn("slow");
    		$(this).die('click');
    		hidey();
    	})
    }
    
    function hidey() {
    	$(".jkimagelarge").live('click', function() {
    		$(this).fadeTo("slow", 1);
    		$("#overlappopup").fadeOut("slow", function() {$("#overlappopup").remove();});
    		$(this).die('click');
    		showy();
    	})
    }
    Works pretty much the same way... you need to have the same css, except for one minor difference... replace "visibility: hidden" with "display: none" and just use the same class for the clicky locations... I've used DIVs to test, so you might want to add a return false if you're going to be using it with anchor elements. Enjoy.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    heheh you rock, Eldearrion!

    Here's a simple script to do what you want without the need for Jquery. Adding the lovely borders is just a matter of some CSS. heheh
    http://diverged.org/thumbnail/konkiel/

    If you really want to do it right, get fake lightbox script
    http://www.emanueleferonato.com/downloads/lightbox.html

    using libraries is cool because you get to stand on the backs of the big guys, but from up there it's hard to see what you're doing.

    putting together your own compilations of stuff you find makes it easier to modify the project.

    I just think using a library before you understand it can be really confusing. But it's free and it's cool, so I understand both angles.

  • #8
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And here is the same thing with added support for multiple divs/images:

    Code:
    $(document).ready(function() {
        showy();
        hidey();
        zind = 10; // Starting z-index, increases by 1 for each new image shown so when a new image appears, it won't pop-up under another currently visible image.
        OffsetTop = 25; // How many pixels to shift the position down from the clicked div.
        OffsetLeft = 15; // How many pixels to shift the position right from the clicked div.
    })
    
    function showy() {
        $(".hidden").live('click', function() {
            zind++; // Increase z-index
            $(this).fadeTo("slow", 0.5); // Set opacity of clicked div.
            var what = $(this).attr("title"); // Get the link from the clicked div's title.
            var showimg = "<img src=' " + what + "' class='overlappopup' />"; // Generate the variable that will be used to create the image.
            $(this).after(showimg); // Create the image.
            var position = $(this).position(); // Get clicked div's location.
            position.top += OffsetTop; // Set the offset from the top of the webpage.
            position.left += OffsetLeft; // Set the offset from the left of the webpage.
            $(this).next().css({"top" : position.top, "left" : position.left, "z-index" : zind}); // Assign z-index and offset to image.
            $(this).next().fadeIn("slow"); // Fade image in.
            $(this).removeClass("hidden"); // Remove  the clicked div's ability to generate images.
            $(this).addClass("shown"); // Give the clicked div the ability to destroy the image it generated.
        })
    }
    
    function hidey() {
        $(".shown").live('click', function() {
            $(this).fadeTo("slow", 1); // Reset opacity of clicked div.
            $(this).next().fadeOut("slow", function() {$(this).remove();}); // Fade out and destroy image.
            $(this).removeClass("shown"); // Remove the clicked div's ability to destroy the image it generated.
            $(this).addClass("hidden"); // Give the clicked div the ability to generate images.
        })
    }
    It uses the following CSS:

    Code:
    <style type="text/css">
    .overlappopup{ 
        position: absolute;
        background: white;
        border: 12px solid black;
        padding: 10px;
        left: 0;
        top: 0;
        display: none;
    }
    </style>
    And was tested with the following HTML mark-up:

    Code:
    <body>
        <div style="width: 150px; height: 150px; color: white; background: navy; padding: 5px;" class="hidden" title="http://www.nasa.gov/images/content/168531main_image_feature_752_ys_4.jpg">Some DIV</div>
        <div style="width: 50px; height: 50px; color: white; background: navy; padding: 5px;" class="hidden" title="http://mormonmatters.org/wp-content/uploads/2008/02/elephant.jpg">Some other DIV</div>
    </body>
    @Tinyscript - I like jQuery, because it's rather easy to use and makes certain things like getting elements by class a lot simpler than it is if you do it with plain JS. But still... if I rock... I won't complain.

    EDIT: The images were picked at random and in no way express the religious beliefs of the poster.
    Last edited by Eldarrion; 03-21-2009 at 12:07 AM.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #9
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping Image Viewer

    Thank you so much for all the work that you did to help me along with this. Unfortunately I do not know enough to know where to put your code. I have tried a couple of ways but my placement does not work. I'm afraid what may seem simple and obvious to you is not simple to me.

    Again .. thank you so much for your time. It is appreciated very much.

    viki barefoot

  • #10
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Well, you'd either put it in a separate .js file the same way your current plug-in is working... or in the header of your website between script tags. (Though keep in mind, you'll have to keep using jQuery and put the code after you've included jQuery) Example:

    Code:
    <head>
    <script type="text/javascript" src="path to jquery.js"></script>
    <script type="text/javascript">
    ... insert javascript code here
    </script>
    <style type="text/css">
    ... insert CSS here
    </style>
    </head>
    <body>
    ... insert HTML Mark-up here.
    </body>
    Just replace the stuff, marked in red and you're set. Shouldn't be too hard to figure out. If you still have questions though... don't hesitate to ask.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

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

    map area

    Hi, (noob alert)

    sorry to revive such old thread but i'm struggling with Overlapping Image Viewer Script for some time because i'm using a map with hotspots and, although Firefox sort of works, i can't get Internet Explorer to make the image overlap when hovering the hotspot.

    I've tried the click suggestion by Eldarrion but, as viki barefoot, i can't pass that point and use the enhanced versions posted after.

    Anyone can give a hand?

    tia

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mestrini View Post
    Hi, (noob alert)

    sorry to revive such old thread but i'm struggling with Overlapping Image Viewer Script for some time because i'm using a map with hotspots and, although Firefox sort of works, i can't get Internet Explorer to make the image overlap when hovering the hotspot.

    I've tried the click suggestion by Eldarrion but, as viki barefoot, i can't pass that point and use the enhanced versions posted after.

    Anyone can give a hand?

    tia
    And here I thought it was just me who couldn't get this to work on an image map with hotspots. Have you found a solution for it yet? I'm not too concerned about whether it works on "click" or on "mouseover", just as long as I can get the large images to pop up from the hotspots.


  •  

    Posting Permissions

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