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

  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Image Popup

    Hi all, I need help with JavaScript/Jquery image popups, i have a thumbnail bar and a display area and when i click a thumbnail that image will display in the display area. Now i want to be able to click/hover on that image in the display area to bring up a bigger version of that image in a popup while staying on my webpage. I would be so great full if anyone could help me. Thanks!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    messier. welcome to codingforums! Please take a moment to read this forum sticky : MUST READ- How to post a JavaScript question!

    When you are done, please post any code you may have already tried, and of course the html structure for the involved page elements.

  • Users who have thanked DanInMa for this post:

    messier33 (07-01-2013)

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Code

    The HTML code for my images


    Code:
    <div id="gallery-thumbnails">
    				<div id="thumbnails" class="gallery-thumbs">
    					<div id="thumbnail-slider">
    						<a class="thumbnail" href="#thumb"><img src="img/xbox_360_thumb.jpg" width="400px" height="400px" border="0" /><span><img src="img/xbox_360.jpg" /><br />Simply beautiful.</span></a>
                            <a class="thumbnail" href="#thumb"><img src="img/Playstation3_thumb.jpg" width="400px" height="400px" border="0" /><span><img src="img/Playstation3.jpg" /><br />So real, it's unreal. Or is it?</span></a>
    						<a href="#"><img src="img/Pc.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/PSP.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/NintendoDS.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/iPhone.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/iPad.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/Wii-U.jpeg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/xboxone.jpg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						<a href="#"><img src="img/PS4.jpeg"><div class="zoom-icon"><img src="img/white-pixel.gif"></div></a>
    						</div>
                            </div>
    						
           
    
    
    				</div>
    The CSS

    Code:
    /* ------------------------------------------------------ */
    /* - Gallery carousel - large image --------------------- */
    /* ------------------------------------------------------ */
    .gallery-carousel {
        background-color: #888888;
        border-radius: 10px;
        box-shadow: 0 0 5px #555555;
        margin-bottom: 10px;
        position: relative;
        width: 602px;
    }
    #gallery-large-image {
        border-radius: 10px;
        height: 352px;
        overflow: hidden;
        position: relative;
        width: 602px;
    }
    #gallery-large-image table {
      height: 100%;
      margin: 0;
      width: 100%;
    }
    #gallery-large-image table td {
      font-size: 0;
      padding: 0;
    }
    #gallery-large-image img {
      max-height: 350px;
      max-width: 600px;
      padding:1px;
    }
    a.gallery_hover {
      cursor: pointer;
      display: block;
      filter: alpha(opacity=0);
      font-size: 0;
      height: 100%;
      left: 1px;
      opacity: 0;
      position: absolute;
      top: 1px;
      width: 50%;
    }
    a.gallery_hover:hover {
      filter: alpha(opacity=50);
      opacity: 0.5;
    }
    a.gallery_hover_next {
        left: auto;
        right: 0;
    }
    a.gallery_hover div {
      background: transparent url("../../img/slideshow_sprite_3.png") no-repeat 0 0;
      height: 20%;
      min-height: 58px;
    }
    a.gallery_hover div.anchor-fill { /* required so that whole anchor is clickable in IE */
      background-position: -5000px 0;
      height: 40%;
    }
    a.gallery_hover_prev div {
      background-position: 0 0;
    }
    a.gallery_hover_next div {
      background-position: right -260px;
    }
    #gallery-large-image a.arrow-inactive {
      height: 0;
      overflow: hidden;
      width: 0;
    }
    
    /* ------------------------------------------------------ */
    /* - Gallery carousel - thumbnails ---------------------- */
    /* ------------------------------------------------------ */
    #gallery-thumbnails {
        position: absolute;
        right: 20px;
        top: 6px;
    }
    #thumbnail-slider {
    	position: relative;
    }
    .gallery-thumbs {
        background-color: transparent;
        font-size: 0;
    	height: 343px;
        overflow: hidden;
        padding: 0;
        width: 70px;
    }
    .gallery-thumbs a {
        display: block;
        margin-bottom: 2px;
        position: relative;
    }
    .gallery-thumbs a img {
        border: 1px solid #5A5A5A;
        border-radius: 5px;
        height: 45px;
        margin: 0 1px;
        opacity: 0.9;
    	filter: alpha(opacity=90);
        width: 66px;
    }
    .gallery-thumbs a img:hover  {
    	border: 1px solid #AAAAAA;
    	box-shadow: 0 0 2px #FFFFFF;
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    .gallery-thumbs a.selected-image img {
      border: 1px solid #666666;
    }
    
    .zoom-icon {
        display: none;
        left: 0;
        opacity: 0.3;
    	filter: alpha(opacity=30);
        position: absolute;
        top: 0;
    }
    .zoom-icon img {
      filter: alpha(opacity=50);
      opacity: 0.5;
    }
    img.scroll-arrow {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: -20px;
    }
    #ffw-link {
      top: 345px;
    }
    #gallery-thumbnails img.scroll-arrow:hover {
      filter: alpha(opacity=80);
      opacity: 0.7;
    }
    #gallery-thumbnails img.arrow-inactive,
    #gallery-thumbnails img.arrow-inactive:hover {
      cursor: auto;
      filter: alpha(opacity=20);
      opacity: 0.2;
    }
    
    /* ------------------------------------------------------ */
    /* - Gallery carousel - caption, title ------------------ */
    /* ------------------------------------------------------ */
    #gallery-image-info {
        background-color: #CCCCCC;
    	border: 1px solid #666666;
        border-radius: 5px 5px 5px 5px;
        bottom: 10px;
        height: auto;
        left: 10px;
        opacity: 0.8;
    	filter: alpha(opacity=80);
        padding: 3px;
        position: absolute;
        width: 574px;
    }
    #gallery-image-info h3 {
        color: #000000;
        font-size: 12px;
        font-weight: normal;
        margin-bottom: 12px;
        margin-top: 0;
        padding-left: 3px;
        padding-top: 5px;
        width: 480px;
    }
    #gallery-image-mod-date {
        bottom: 4px;
        color: #555555;
        font-size: 90%;
        line-height: 1;
        position: absolute;
        right: 85px;
    }
    #thumbnail-descriptions,
    #thumbnail-dates {
      display: none;
    }
    
    
    
    @media (max-width: 979px) {
    
        .gallery-carousel {
            border-radius: 10px 10px 3px 3px;
            margin-top: 0;
            max-width: 100%;
        }
        #gallery-image-info {
            border: 0 none;
            border-radius: 0 0 10px 10px;
            bottom: 0;
            left: 0;
            margin: 0 2%;
            padding: 0;
            position: relative;
            width: 96%;
        }
        #gallery-image-info h3 {
            margin-bottom: 5px;
            padding: 5px 10px 0;
            width: auto;
        }
        #gallery-large-image,
        #gallery-large-image img {
            width: 100%;
            height: auto;
        }
        #gallery-thumbnails {
            margin: 0 1%;
            padding: 5px 0 2px;
            position: relative;
            right: 0;
            top: 0;
            width: 98%;
        }
        .gallery-thumbs {
            height: auto;
            width: auto;
        }
        #gallery-thumbnails img.scroll-arrow {
            display: none;
        }
        
        #thumbnail-slider {
            top: 0 !important;
        }
        
        .gallery-thumbs a {
            float: left;
        }
        #gallery-image-mod-date {
            bottom: 0;
            line-height: 1.2;
            padding: 5px 10px;
            position: relative;
            right: auto;
        }
    
    }
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: -50px; /*position where enlarged image should offset horizontally */
    
    }

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    This is my Javascript

    Code:
    /* --------------------------------------
    -- Settings and init
    -------------------------------------- */
    var giImgTotal = 10; /* Number of images in gallery */
    var giCurrentImage = 1; /* Image displayed on init */
    
    var giSliderPosition = 0; /* Initial position for scroller */
    var giThumbsShown = 7; /* Thumbnails shown on scroller */
    var giTotalPositions = giImgTotal - giThumbsShown; /* Number of possible positions for scroller */
    
    /* --------------------------------------
    -- Hide and/or show slider arrow buttons
    -------------------------------------- */
    function showHideSliderButtons() {
      if (giSliderPosition == giTotalPositions) toggleSliderArrows(1, 0);
      else if (giSliderPosition == 0) toggleSliderArrows(0, 1);
      else toggleSliderArrows(1, 1);
    }
    
    function toggleSliderArrows(bLeftOn, bRightOn) {
      if (bLeftOn == 1) $("#rew-link").removeClass("arrow-inactive");
      else $("#rew-link").addClass("arrow-inactive");
    
      if (bRightOn == 1) $("#ffw-link").removeClass("arrow-inactive");
      else $("#ffw-link").addClass("arrow-inactive");
    }
    
    function scrollMove(obj) {
      sButtonId = $(obj).attr("id");
    
      if (sButtonId == "rew-link") {
        /* Rewind (scroll to left) */
        giSliderPosition -= giThumbsShown;
        if (giSliderPosition < 0) giSliderPosition = 0;
      } else {
        /* Forewind (scroll to right) */
        giSliderPosition += giThumbsShown;
        if (giSliderPosition > giTotalPositions) giSliderPosition = giTotalPositions;
      }
    
      $("#thumbnail-slider").animate({
        top: "-" + 49 * giSliderPosition + "px"
      });
    
      showHideSliderButtons();
    }
    
    function centerSlider(imageId) {
        if ($("#gallery-thumbnails").css("position") === "relative") {
            // In small screen mode; disable centering
            return false;
        }
        
    	/* Assumes odd number of thumbs shown so that selected thumb can be 'centred' */
    	if (imageId <= (giThumbsShown + 1) / 2) {
    		giSliderPosition = 0;
    	} else if (imageId > giImgTotal - ((giThumbsShown + 1) / 2)) {
    		giSliderPosition = giTotalPositions;
    	} else {
    		giSliderPosition = imageId - ((giThumbsShown + 1) / 2);
    	}
    
    	$("#thumbnail-slider").animate({
    		top: "-" + 49 * giSliderPosition + "px"
    	});
    }
    
    function swapGalleryImage(ancThumbnail) {
    	var newImgSrc = $(ancThumbnail).children("img").attr("src");
    	var newImgId = parseInt($(ancThumbnail).attr("imgid"));
    	var currentImg = $("#gallery-large-image table img");
    	if (newImgSrc != currentImg.attr("src")) {
    		/* Swap large image */
    		currentImg.attr("src", newImgSrc);
    		
    		
    		
    		/* Update thumbnail semi-transparent overlay */
    		$(".zoom-icon").css("display", "none");
    		$(".selected-image").removeClass("selected-image");
    		$(ancThumbnail).children(".zoom-icon").css("display", "block");
    		$(ancThumbnail).addClass("selected-image");
    	}
    }
    
    $(document).ready(function() {
      thumbnailCount = 0;
      $("#thumbnail-slider a").each(function(){
        thumbnailCount++;
        $(this).attr("imgId", thumbnailCount);
      });
    
    	$("#thumbnail-slider a").click(function(){
    		swapGalleryImage($(this));
    		centerSlider($(this).attr("imgid"));
    		showHideSliderButtons();
    		$("#scroll-info-current").html($(this).attr("imgid"));
    		return false;
    	});
      
    	$(".scroll-arrow").click(function() {
    		if ($(this).hasClass("arrow-inactive") === false) scrollMove(this);
    	});
      
    	/* Previous / next button, large image left/right overlay click handler */
    	$(".scroll-text, .gallery_hover").click(function() {
    		var currentImage = parseInt($(".selected-image").attr("imgid"));
    		var newImageId = 0;
    		if ($(this).attr("id") === "rew-link-2" || $(this).attr("id") === "rew-link-1") {
    			/* Show previous image */
    			if (currentImage > 1) {
    				newImageId = currentImage - 1;
    			}
    		} else {
    			/* Show next image */
    			if (currentImage < giImgTotal) {
    				newImageId = currentImage + 1;
    			}
    		}
    		if (newImageId != 0) {
    			objButton = $("#thumbnail-slider a[imgid='"+newImageId+"']");
    			swapGalleryImage(objButton);
    			centerSlider(newImageId);
    			showHideSliderButtons();
    			$("#scroll-info-current").html(""+newImageId);
    		}
    		return false;
    	});
    	
    	
    	
    });


  •  

    Tags for this Thread

    Posting Permissions

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