...

View Full Version : overlapping image viewer - on click?



vkbarefoot
03-20-2009, 05:12 PM
Overlapping Image Viewer Script
http://www.javascriptkit.com/script/script2/overlapimageviewer.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

TinyScript
03-20-2009, 05:24 PM
change the onmouseover to onmouseclick

vkbarefoot
03-20-2009, 06:50 PM
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

Eldarrion
03-20-2009, 06:56 PM
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):



$('#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.

Eldarrion
03-20-2009, 07:07 PM
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:



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.

Eldarrion
03-20-2009, 10:33 PM
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"):



$(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.

TinyScript
03-20-2009, 10:56 PM
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.

Eldarrion
03-20-2009, 11:40 PM
And here is the same thing with added support for multiple divs/images:



$(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:



<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:



<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. :p

EDIT: The images were picked at random and in no way express the religious beliefs of the poster.

vkbarefoot
03-21-2009, 07:21 PM
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

Eldarrion
03-23-2009, 06:15 PM
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:



<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.

mestrini
10-19-2010, 01:44 AM
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

Mountaingal
11-24-2010, 06:11 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum