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 4 of 4

Thread: Not popping out

  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not popping out

    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.

    Code:
    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/////////////
    
    	pluscontainers:[],
    	$enlargebox: null,
    	boxzindex:100,
    
    getcaptionposition:function($img){
    	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)
    		e.preventDefault()
    		e.stopPropagation()
    	})
    	$enlargebox.click(function(e){
    		e.stopPropagation()
    	}).find('div.title img:eq(0)').click(function(){ //close image box when "x" icon is clicked on
    		$enlargebox.fadeOut(plusimageviewer.fadeduration[1])
    	})
    	this.pluscontainers.push({$img:$img, $caption:$caption, captionpos:captionpos, $enlargebox:$enlargebox, $enlargearea:$enlargearea, enlargesrc:enlargesrc, enlargesize:enlargesize})
    }
    
    }
    
    jQuery(document).ready(function($){
    	var $targetimages=$('img[data-plusimage]')
    	$targetimages.each(function(i){
    		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++){
    				pluscontainers[i].$enlargebox.hide()
    			}
    		})
    		$(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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Take a look at this answer (Last one) and see if it helps
    http://www.codingforums.com/showthre...94#post1298094

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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