View Full Version : Not popping out

12-07-2012, 04:18 AM
Alright, so I got this code from the website Javascriptkit.com because I don't have much time to write my own code and have no formal training in javascript.

The javascript is doing it's job of popping out the plus sized image I want, but it's not in the dimensions I put in the source code plus it doesn't seem to want to load the image needed for the close window menu.

var plusimageviewer={
enlargeboxmarkup: '<div class="enlargebox"><div class="title"><img src"images/closebox.gif" style="margin: 2px 1px 1px 0" title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds
//////////NO NEED TO EDIT BEYOND HERE/////////////

$enlargebox: null,

var offsets=$img.offset()
return [offsets.left+this.captionoffset[0], offsets.top+$img.outerHeight()+this.captionoffset[1]] //return position of caption relative to thumb image

getlargeimgposition:function($, $enlargebox){
var boxdimensions=[$enlargebox.outerWidth(), $enlargebox.outerHeight()]
var docdimensions=[$(window).width(), $(window).height()]
var docscrollpos=[$(document).scrollLeft(), $(document).scrollTop()]
var leftpos=(docdimensions[0]>boxdimensions[0])? docscrollpos[0]+docdimensions[0]/2-boxdimensions[0]/2 : docscrollpos[0]+1 //center large image horizontally
var toppos=(docdimensions[1]>boxdimensions[1])? docscrollpos[1]+docdimensions[1]/2-boxdimensions[1]/2 : docscrollpos[1]+1
return [leftpos, toppos]

showimage:function($, $img){
var pluscontainer=this.pluscontainers[$img.data('order')]
pluscontainer.$enlargearea.empty().html('<img src="'+pluscontainer.enlargesrc+'" style="width:'+pluscontainer.enlargesize[0]+';" height:'+pluscontainer.enlargesize[1]+'" />')
var largeimgpos=this.getlargeimgposition($, pluscontainer.$enlargebox)
pluscontainer.$enlargebox.css({zIndex:++this.boxzindex, display:'none', left:largeimgpos[0], top:largeimgpos[1]}).fadeIn(this.fadeduration[0])

init:function($, $img){
var captionpos=this.getcaptionposition($img)
var $caption=$('<div class="enlargecaption"><a href="#">View Full Image</a></div>').css({left:captionpos[0], top:captionpos[1]}).appendTo(document.body)
var $enlargebox=$(this.enlargeboxmarkup).appendTo(document.body)
var $enlargearea=$enlargebox.find('.largeimage:eq(0)') //reference DIV that will contain actual enlarged image
var enlargesrc=$img.attr('data-plusimage')
var enlargesize=$img.attr('data-plussize').split(',') //get dimensions of large image as string
enlargesize=[parseInt(enlargesize[0]), parseInt(enlargesize[1])] //get dimensions of large image as array [w, h]
$caption.click(function(e){ //open large image when caption is clicked on
plusimageviewer.showimage($, $img, e)
}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
this.pluscontainers.push({$img:$img, $caption:$caption, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})


var $targetimages=$('img[data-plusimage]')
var $img=$(this).data('order', i)
plusimageviewer.init($, $(this), i)
if ($targetimages.length>0){
$(document).click(function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
$(window).bind('resize', function(){ //hide all plus size images when document is clicked
var pluscontainers=plusimageviewer.pluscontainers
for (var i=0; i<pluscontainers.length; i++){
var captionpos=plusimageviewer.getcaptionposition(pluscontainers[i].$img)
pluscontainers[i].captionpos=[captionpos[0], captionpos[1]] //refresh caption position
pluscontainers[i].$caption.css({left:pluscontainers[i].captionpos[0], top:pluscontainers[i].captionpos[1]}) //reposition captions when window resized


Like I said, I'm not that great at javascript but the part that is suppose to be defining the close menu is in the very beginning

12-07-2012, 06:12 PM
Take a look at this answer (Last one) and see if it helps

12-07-2012, 06:40 PM
Oh, I'm sorry sunfighter, I might now have been very clear. What this javascript does is when applied to an thumbnail image on the page, it creates a 'Enlarge Image' caption, so when clicked on the same image or new image will pop up in the real larger dimensions of the picture. What I'm having a problem is with the new popped up image, the javascript is doing it's job of creating the new image, but it's not in the dimensions specified (seems to be in some preset dimensions) that I can't seem to override, and also it's not creating the Closebox button on the top of the image. Hope this helps further clearify what I'm talking about. Also if you want to test the script, it comes with a css file for the enlarge button, I can provide that also if necessary.

Old Pedant
12-08-2012, 04:02 AM
Can you supply us with a URL to look at?

However: There are tons of popouts like this on the web, and if the one you have is faulty, you might find some other that works better.