How to open image in popup window?

Hi

I want to open selected Image on popup window

this is I have tried so far

there are two things that I am not able to do so far

1)When I click on Image at bottom image in popup window not display on full window.I have to scroll up
to see that Image

2)I want to disable click on window when Image in open in popup window only clicking on Close will dismiss popup window.

Hi there vngx,

  1. change this…
$(".showImage").on("click",function(){
showImage($(this).text());
});

…to this…

$(".showImage").on("click",function(){
window.scrollTo(0,0);
showImage($(this).text());
});
  1. change this…
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

…to this…

//if mask is clicked
//$('#mask').click(function () {
//$(this).hide();
//$('.window').hide();
//});

…which is just a pedantic way of saying remove it. :mask:

coothead

1 Like

Hi,

I’d do it something like this with position:fixed to avoid scroll issues

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#mask {
	position: fixed;
	left: 0;
	top: 0;
	bottom:0;
	right:0;
	margin:auto;
	visibility:hidden;
	z-index: -2;
	background: #000;
	background:rgba(0,0,0,0.8);
	overflow:hidden;
	opacity:0;
	transition: all .5s ease-in-out;
}
#mask.showing{
	opacity:1;
	z-index: 9000;
	visibility:visible;
	overflow:auto;
	transition: all .5s ease-in-out;
}
#boxes {
	display:table;
	width:100%;
	height:100%;
}
.window {
	max-width: 780px;
	z-index: 9999;
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	margin :auto;
	background-color: #ffffff;
	font-family: 'Segoe UI Light', sans-serif;
	font-size: 15pt;
}
.window img {
	width:100%;
	height:auto;
}
.inner{display:table-cell;vertical-align:middle;}
#popupfoot {
	font-size: 16pt;
}
.showImage {
	margin:0 0 3em;
	display:table;
	text-align:center
}
.showImage img {
	display:block
}
</style>
</head>

<body>
<div class="imagesBlock"> <a class="showImage"><img src="https://shareonline.in/wp-content/uploads/2016/06/nature-wallpaper-gallery-path-of-nature-wallpaper-ouRejx.jpg" width="200" height="200">image1</a> <a class="showImage"><img src="http://wallpapercave.com/wp/l5FBhgU.jpg" width="200" height="200">image2</a> <a class="showImage"><img src="http://www.walldevil.com/wallpapers/a49/wallpapers-nature-wallpaper-peony-white-online-canada-corner-pink.jpg" width="200" height="200">image3</a> <a class="showImage"><img src="http://wallpapercave.com/wp/Jp7kTmf.jpg" width="200" height="200">image4</a> <a class="showImage"><img src="http://www.hdbloggers.net/wp-content/uploads/2016/06/Nature.jpg" width="200" height="200">image5</a> </div>
<div id="mask">
  <div id="boxes">
    <div class="inner">
      <div id="dialog" class="window"> <a href="#" class="close">CLOSE</a>
        <div id="popupfoot"> <img src="#" class="image" alt="Loading..."></img> </div>
      </div>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function() {

    function showImage(fullPath) {
        var id = '#dialog';
        if (fullPath == "image1") {
            var fullImagePath =
                "https://shareonline.in/wp-content/uploads/2016/06/nature-wallpaper-gallery-path-of-nature-wallpaper-ouRejx.jpg";
        }
        if (fullPath == "image2") {
            var fullImagePath =
                "http://wallpapercave.com/wp/l5FBhgU.jpg";
        }
        if (fullPath == "image3") {
            var fullImagePath =
                "http://www.walldevil.com/wallpapers/a49/wallpapers-nature-wallpaper-peony-white-online-canada-corner-pink.jpg";
        }
        if (fullPath == "image4") {
            var fullImagePath =
                "http://wallpapercave.com/wp/Jp7kTmf.jpg";
        }
        if (fullPath == "image5") {
            var fullImagePath =
                "http://www.hdbloggers.net/wp-content/uploads/2016/06/Nature.jpg";
        }


        $('.image').attr({
            'src': fullImagePath
        });

        //if close button is clicked
        $('.window .close').click(function(e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').removeClass('showing');
        });

    };

    $(".showImage").on("click", function() {
        showImage($(this).text());
        $('#mask').addClass('showing');

    });

});
</script>
</body>
</html>

Note that you shouldn’t be squishing or stretching your images and my example allows the natural aspect ratio to stay in effect.

Also you seem to be supplying the same image for the small and large examples but I guess you are just doing that for testing. Don’t just resize the large image smaller in the browser as that means all images have to be loaded before the page is displayed which defeats the point of opening in the larger window.

It may be better to supply the path to the large image either in a data attribute in the html of the image or indeed in an href around the image that holds the destination to the large image (means it will display the large image even if js is turned off).

1 Like

Hi coothead

I did both those changes https://jsfiddle.net/22ab70s5/1/

there is one problem fixed

1)Dialog is not dismissing by clicking on any where in window it only close while click on close button at top

bu there is two thing that need to be complete

1)Suppose I have 50 Images or a bit more then If I am currently viewing 40th Images and I click on that 40th Images I slide up to first Image.I want I should remain to 40th position from scroll

2)Mask is not displaying on full document there is still bottom white area is displaying I want disable page scroll when dialog is open.

rgds

Those 2 problems are fixed in the example I gave you above. Study it and test it and then implement it :slight_smile:

1 Like

@PaulOB

Your solution is working perfect as per my requirement :slight_smile:

The only thing in this is that outer window vertical scroll bar is visible while user is viewing an Image in Dialog

What I want that should be disable while user is viewing an Image.although if Image length is more then window height showing internal scrollbar on that case is ok(see Image 4 there is two vertical scrollbar) .

If I understand what you are saying we could add a class to the html element when the image is showing and hide the default scrollbar and just leave the scrollbar for the image if needed.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#mask {
	position: fixed;
	left: 0;
	top: 0;
	bottom:0;
	right:0;
	margin:auto;
	visibility:hidden;
	z-index: -2;
	background: #000;
	background:rgba(0,0,0,0.8);
	overflow:hidden;
	opacity:0;
	transition: all .5s ease-in-out;
}
#mask.showing{
	opacity:1;
	z-index: 9000;
	visibility:visible;
	overflow:auto;
	transition: all .5s ease-in-out;
}
#boxes {
	display:table;
	width:100%;
	height:100%;
}
.window {
	max-width: 780px;
	z-index: 9999;
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	margin :auto;
	background-color: #ffffff;
	font-family: 'Segoe UI Light', sans-serif;
	font-size: 15pt;
}
.window img {
	width:100%;
	height:auto;
}
.inner{display:table-cell;vertical-align:middle;}
#popupfoot {
	font-size: 16pt;
}
.showImage {
	margin:0 0 3em;
	display:table;
	text-align:center
}
.showImage img {
	display:block
}
.hide-scroll,.hide-scroll body{overflow:hidden!important}
</style>
</head>

<body>
<div class="imagesBlock"> <a class="showImage"><img src="https://shareonline.in/wp-content/uploads/2016/06/nature-wallpaper-gallery-path-of-nature-wallpaper-ouRejx.jpg" width="200" height="200">image1</a> <a class="showImage"><img src="http://wallpapercave.com/wp/l5FBhgU.jpg" width="200" height="200">image2</a> <a class="showImage"><img src="http://www.walldevil.com/wallpapers/a49/wallpapers-nature-wallpaper-peony-white-online-canada-corner-pink.jpg" width="200" height="200">image3</a> <a class="showImage"><img src="http://wallpapercave.com/wp/Jp7kTmf.jpg" width="200" height="200">image4</a> <a class="showImage"><img src="http://www.hdbloggers.net/wp-content/uploads/2016/06/Nature.jpg" width="200" height="200">image5</a> </div>
<div id="mask">
  <div id="boxes">
    <div class="inner">
      <div id="dialog" class="window"> <a href="#" class="close">CLOSE</a>
        <div id="popupfoot"> <img src="#" class="image" alt="Loading..."></img> </div>
      </div>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function() {

    function showImage(fullPath) {
        var id = '#dialog';
        if (fullPath == "image1") {
            var fullImagePath =
                "https://shareonline.in/wp-content/uploads/2016/06/nature-wallpaper-gallery-path-of-nature-wallpaper-ouRejx.jpg";
        }
        if (fullPath == "image2") {
            var fullImagePath =
                "http://wallpapercave.com/wp/l5FBhgU.jpg";
        }
        if (fullPath == "image3") {
            var fullImagePath =
                "http://www.walldevil.com/wallpapers/a49/wallpapers-nature-wallpaper-peony-white-online-canada-corner-pink.jpg";
        }
        if (fullPath == "image4") {
            var fullImagePath =
                "http://wallpapercave.com/wp/Jp7kTmf.jpg";
        }
        if (fullPath == "image5") {
            var fullImagePath =
                "http://www.hdbloggers.net/wp-content/uploads/2016/06/Nature.jpg";
        }


        $('.image').attr({
            'src': fullImagePath
        });

        //if close button is clicked
        $('.window .close').click(function(e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').removeClass('showing');
			$('html').removeClass('hide-scroll');
        });

    };

    $(".showImage").on("click", function() {
        showImage($(this).text());
        $('#mask').addClass('showing');
		$('html').addClass('hide-scroll');
    });

});
</script>
</body>
</html>

Is that what you meant?

1 Like

@PaulOB

excatly what I want thanks a lot now all things are fixed

1 Like

Hi there vngx,

I normally avoid “jQuery” and other “Frameworks” problems like the plaque. :scream:

But as my bath was running at the time and I was in reasonably good humour
I thought that I would just answer your immediate problems. :sunglasses:

Personally, I think that what you are doing is ill conceived. :mask:

It would be much better to simply have a list of thumbnails linked to pages
containing the larger images thus saving a great deal of bandwidth. :ok_hand:

Your present set-up is not responsive either, just “arty farty”. :flushed:

Also just using HTML and CSS is simple and far easier to maintain. :sunglasses:

coothead

I know the answer wasn’t directed at me but I think a lot of those questions are answered in my example :slight_smile: (apart from using jquery). :wink:

The images are now correct aspect ratio and responsive and are only loaded when clicked (of course the thumbnails should actually be thumbnails as mentioned in my post).

Nearly all the work is done in css and the js only triggers class changes and supplying the destination of the large images (although I would have done that with an href around the image and grabbing the destination from the href rather than needing to list them in the js).

although this code is running fine in chrome,ie and opera

but when I run this code in mozilla firefox page jump on start of page while Image shown on dialog

anyone on this?

Do you have a current full example to look at?

here it is

Are you talking about the fact that the vertical viewport scrollbar is hidden when the image is active and then there is a slight jump left in the page when the overlay is removed?

If so then there is little we can do about this because if we don’t hide the scrollbar then you will get a double scrollbar when the image is taller than the viewport which looks more ugly.

Perhaps you could disguise the viewport re-position by sliding in and out the image instead.

e.g.

#mask{transform:translateX(-100%)}
.hide-scroll #mask{transform:translateX(0)}

where do I need to put these two line in css file
If yes here it is still not working

Ok

I have used code of this post in some my other application but it is not working

When user click on button SHOW then popup window should open.

anyone on this?

You haven’t added any code to make it visible when clicked. You added the showing class but did nothing with it. I’m guessing you want something like this:

#mask.showing,#mask.showing .window{display:block}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.