Newbie question about making functions to pass image names for viewing larger

[DougP]

Newbie question about making functions to pass styles parameters...
I found this on another site which works great but I would like have functions so that I can call the same code over an over, instead of duplicating it many times.
The top part is a table with 3 images. But the original code is hard coded for only one image.
Is there a way to make functions out of the parts with "img01" and "MyImg" so I can pass any image name to those functions?
I highlighted the locations where "img01" and "MyImg" is located further down in the code.
Or give me a starting point.

TIA

<asp:Table runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                            <img id="[highlight #FCE94F]myImg[/highlight]" src="images/pencils/rebekah%20pic3%20small%20blurred.jpg" alt="First Pencil Ever in 2006" width="300"  />
                        </asp:TableCell>
                        
                         <asp:TableCell>
                            <img id="[highlight #FCE94F]myImg2[/highlight]" src="images/pencils/4ftpencil.jpg" alt="4Ft Pencil" width="300"  />
                        </asp:TableCell>
                        
                        <asp:TableCell>
                            <img id="[highlight #FCE94F]myImg3[/highlight]" src="images/pencils/Ally%20Pencil%20Blurrred.jpg" alt="Pencil for teacher" width="300"  />
                        </asp:TableCell>
              
                    </asp:TableRow>
                </asp:Table>

-------------------------------------------
           <style>
                #[highlight #FCE94F]myImg[/highlight] {
                    border-radius: 5px;
                    cursor: pointer;
                    transition: 0.3s;
                }

                #[highlight #FCE94F]myImg[/highlight]:hover {opacity: 0.7;}

                /* The Modal (background) */
                .modal {
                    display: none; /* Hidden by default */
                    position: fixed; /* Stay in place */
                    z-index: 1; /* Sit on top */
                    padding-top: 100px; /* Location of the box */
                    left: 0;
                    top: 0;
                    width: 100%; /* Full width */
                    height: 100%; /* Full height */
                    overflow: auto; /* Enable scroll if needed */
                    background-color: rgb(0,0,0); /* Fallback color */
                    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
                }

                /* Modal Content (image) */
                .modal-content {
                    margin: auto;
                    display: block;
                    width: 80%;
                    max-width: 700px;
                }

                /* Caption of Modal Image */
                #caption {
                    margin: auto;
                    display: block;
                    width: 80%;
                    max-width: 700px;
                    text-align: center;
                    color: #ccc;
                    padding: 10px 0;
                    height: 150px;
                }

                /* Add Animation */
                .modal-content, #caption {    
                    -webkit-animation-name: zoom;
                    -webkit-animation-duration: 0.6s;
                    animation-name: zoom;
                    animation-duration: 0.6s;
                }

                @-webkit-keyframes zoom {
                    from {-webkit-transform:scale(0)} 
                    to {-webkit-transform:scale(1)}
                }

                @keyframes zoom {
                    from {transform:scale(0)} 
                    to {transform:scale(1)}
                }

                /* The Close Button */
                .close {
                    position: absolute;
                    top: 15px;
                    right: 35px;
                    color: #f1f1f1;
                    font-size: 40px;
                    font-weight: bold;
                    transition: 0.3s;
                }

                .close:hover,
                .close:focus {
                    color: #bbb;
                    text-decoration: none;
                    cursor: pointer;
                }

                /* 100% Image Width on Smaller Screens */
                @media only screen and (max-width: 700px){
                    .modal-content {
                        width: 100%;
                    }
                }
            </style>
           
            <!-- The Modal -->
            <div id="myModal" class="modal">
              <span class="close">&times;</span>
              <img class="modal-content" id="[highlight #FCE94F]img01[/highlight]" />
              <img class="modal-content" id="[highlight #FCE94F]img02[/highlight]" />
              <img class="modal-content" id="[highlight #FCE94F]img03[/highlight]" />

              <div id="caption"></div>
            </div>

            <script>
            // Get the modal
            var modal = document.getElementById('myModal');

            // Get the image and insert it inside the modal - use its "alt" text as a caption
            var img = document.getElementById('myImg');             // img01 is here need to make this a funcion
            var modalImg = document.getElementById("img01");        // img01 is here need to make this a funcion
            var captionText = document.getElementById("caption");
            img.onclick = function(){
                modal.style.display = "block";
                modalImg.src = this.src;
                captionText.innerHTML = this.alt;
            }

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() { 
                modal.style.display = "none";
            }
            </script>

DougP

 

[ChrisHirst]

var img = document.getElementById('myImg');             // img01 is here need to make this a funcion
var modalImg = document.getElementById("img01");        // img01 is here need to make this a funcion
var captionText = document.getElementById("caption");

Basically what you need to do is instead of having the element IDs hardcoded in the script, you pass them as parameters to a function that displays the 'modal' window.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[DougP]

Ok that much I know, but I don't know how to make the functions. After that then how do I call them?
I want to have a table full of images and when I click on one it popups the window with the "X" so you can close.
Or which part do I put into the function?

here are my 3 images, each id has to be different.
<asp:Table runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                            <img id="myImg" src="images/pencils/rebekah%20pic3%20small%20blurred.jpg" alt="First Pencil Ever in 2006" width="300"  />
                        </asp:TableCell>
                        
                         <asp:TableCell>
                            <img id="myImg2" src="images/pencils/4ftpencil.jpg" alt="4Ft Pencil" width="300"  />
                        </asp:TableCell>
                        
                        <asp:TableCell>
                            <img id="myImg3" src="images/pencils/Ally%20Pencil%20Blurrred.jpg" alt="Pencil for teacher" width="300"  />
                        </asp:TableCell>
              
                    </asp:TableRow>
                </asp:Table>

-------------------------------- my new javascript function -----------
function imgpopup(imgid) {
    [highlight #FCAF3E]what part of the code goes in here?
[/highlight]}

DougP

 

[vacunita]

Just make a function like you would anywhere else, before your table of images if you want to, in a script section. You can pass it an image object like the images people are clicking on to enlarge. You would need to have a hidden absolutely positioned div where the large image can be displayed and you can unhide it when required.

<script>
function enlarge(imgObj)
{
  do things to show image
}
</script>

After that then how do I call them?

Well think about when you want to call them, and you call them like a function for any other language.
I would have them called when a user clicks on an image, so likely on the onclick event of the image.

 <img id="myImg" src="images/pencils/rebekah%20pic3%20small%20blurred.jpg" alt="First Pencil Ever in 2006" width="300" [b]onclick="enlarge(this);[/b]" />

This is very basic JS. How to call a function, and the general events objects have. By using the "this" keyword in the function, i can pass the image object in its entirety to the function, so I can directly use say its source to say get its source and extrapolate the larger images source or get some other property of the image.

function enlarge(imgObj)
{
[indent]alert(imgObj.src)[/indent]
}

This would then show the path to the small image. I could potentially use that path to generate the path to the big image.

function enlarge(imgObj)
{
[indent]var largeimgsrc = imgObj.src.replace('small','large');[/indent]
}

Then I can assign that path to the src for an image in my large display div and then display it.

function enlarge(imgObj)
{
[indent]var largeimgsrc = imgObj.src.replace('small','large');[/indent]
[indent]largeDisplayDivImg.src=largeimgsrc;[/indent]
[indent]largeDisplayDiv.style.display='absolute';[/indent]
}

There are of course libraries that already do this out there, but its always good to understand how to do it.



----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[DougP]

Ok, I'm not following your example Vacunita. I think we got off track, the code at the beginning is what I need help with. I don't know enough about JavaScript to take your examples and make them into anything usable for me.
Is there anyway to pass parameters to a style?
I got the code for one picture, so everything is hard coded. I want to be able to have function that I can call for any picture to make it expand with the "X" to close it. The following style is also hard coded [highlight #FCE94F]myImg[/highlight] needs to be able to pass any image tag and then style it.

<style>
                #[highlight #FCE94F]myImg[/highlight] {
                    border-radius: 5px;
                    cursor: pointer;
                    transition: 0.3s;
                }

                #[highlight #FCE94F]myImg[/highlight]:hover {opacity: 0.7;}

DougP

 

[vacunita]

CSS styles cannot take parameters. You can use Javascript to alter the CSS if that's what you want to do, but you said you wanted to have a user click on an image and have it be enlarged. If you enlarge the image directly through its CSS, it will affect everything around it.

To do what you want, you need to create a place where the large image will be shown that will not affect the layout of the page around it. This is generally done with an absolutely positioned div that starts out hidden, and you reveal with JS when you need to show the image.

Here's a short example of what I mean. You can copy this into an HTML file save it, and open it in a browser and see what it does.

<!DOCTYPE HTML>
<html>
<head> <title>Enlarge Images</title>
<style type="text/css">
div.thumbnails
{
	padding:10px;
	background-color:#868686;
}

div.thumbnails div.thumbnail
{
	background-color:#fff;
	padding:10px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.4);
	margin:6px; 
	display:inline-block;
}

div.thumbnails div.thumbnail img
{
	max-width:96px;
}

div#largeImgDiv
{
	display:none;
	background-color:#fff;
	border:1px solid black;
	margin:auto;
	position:absolute;
	top:20px;
	left:100px;
	padding:10px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.4);
}
</style>

<script type="text/javascript">
function enlarge(imgObj)
{
	
	var dispimg = document.getElementById('largeImg');
	var displayDiv = dispimg.parentNode;
	
	dispimg.src = imgObj.src;
	displayDiv.style.display="inline-block";
}

function closeDiv(divObj)
{
	
	divObj.style.display="none";
}
</script>
</head>
<body>
	<div class="thumbnails">
		<div class="thumbnail"><img src="path/to/img1.jpg" alt="thumb1" onClick="enlarge(this);"></div>
		<div class="thumbnail"><img src="path/to/img1.jpg" alt="thumb2" onClick="enlarge(this);"></div>
		<div class="thumbnail"><img src="path/to/img1.jpg" alt="thumb3" onClick="enlarge(this);"></div>
	</div>
	
	<div id="largeImgDiv" onClick="closeDiv(this);"><img id="largeImg" src="" alt="showlarge"></div>
</body>
</html>

The general concept is you need to have a function activate when you click on an image, and then do things to show a larger version of the image.

For this code, all I do, limit the size of the image for the small thumbnails, and then when its set in the display div, I just let it display in its native size. But you could of course use a small image, and then set the large display image to a different larger image if that's what you want.

Play around with it, see what it does. You need to understand how it works before you can incorporate it into your ASP page.





----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[DougP]

I'm sorry for the confusion, about my explanation or lack knowing of what I am doing.
But the original code at the top has exactly what I want to do, if you just copy it and paste it into a WEB you will see how it works.
that code was on a web site and it only works for one image. I have dozens so I don't really want to copy 50 lines of code dozens of times changing the image name and so on.

I guess it opens a new page with a "X" in the corner.
So I am after something a function that I want to pass it parameters to
like image name



DougP

 

[vacunita]

O.K. I missed the JS part in the original code, Just saw ASP and CSS styles.

The code is doing pretty much what I did in my example above. Only it does it such that it only applies to a single image.


Basically what the code does it it searches out a specific image and attaches a function to the images onclick event. But since you want to do it for more, then you need to have a way to know what images you are going to be doing this for. The code runs automatically when the page loads and does so only once.

In that run, it attaches a function to the one image's onclick event as well as the span's onclick event.

Since the part you want to pass parameters to only runs once on page load, there is no place to call this from and pass parameters to it.

To do what you want with multiple images you need to have a way to get all the images this is going to be done for and have it do the same thing its doing for one to all.

Your images appear to be in a table, you could conceivably get a list of images in your table and run through them to attach the functions to their onclick events.

I cannot possibly give you a packaged solution that will just be copy and paste and work, you need to be able to understand what it does and adapt it to your code. Based on your code something like this should work.

<script>
function makeClickable()
  {
	var mytable = document.getElementById('mytable');
	var modal = document.getElementById('myModal');
	var modalImg = document.getElementById("modalImg");        // img01 is here need to make this a funcion
	var captionText = document.getElementById("caption");
	var images = mytable.getElementsByClassName('imags');
	
	for(var i=0; i<=images.length-1;i++)
	{ 
	
				
				images[i].onclick = function(){
                modal.style.display = "block";
                modalImg.src = this.src;
                captionText.innerHTML = this.alt;
				}
	}
	
	
  }

           // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() { 
                modal.style.display = "none";
            }

</script>
.... all your site code here,

</body>
//call the new function here
makeClickable();
</html>

This is the basic function you'll need.

The function is pretty simple.
1. It gets the table your images are in.
2. It gets the modal as it did before.
3. It gets an image inside the modal, you only need to get one, no need to even have more than one inside the modal even.
4. It gets the captionText element.
5. it gets a list of all the images in your table. For this it will expect every image to have a class of "imags" so it can find them. It can be whatever classname you want but all images must have the same classname.
6. It then runs through the images, and applies the function as defined to the Onclick event of each one of them. Which is basically just to display the modal, make the modal's img src the the src of the image you click on, and the caption be the text in the alt property of the image you click on.


At the end of your page, you call the function so it does all this when the page loads.






----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech