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

  3. Users who have thanked DanInMa for this post:

    messier33 (07-01-2013)

  4. #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 */
    
    }

  5. #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
  •