Member Avatar for centenond

So , i want when ppl click on my picture open like a new window to show full size picture like facebook, im thinking this gotta be javascript .. How would i do this?

Thanks :3

newwindow.png 515.92 KB
  • 2 Contributors
  • 2 Replies
  • 174 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by centenond
Member Avatar for JorgeM

There are different ways to do this. If you want to open what looks like a window, but really a div on the same page, what you would do is have that div with a display:none; when the page first loads so you dont see it.

when you click on a thumbnail or link, you want to change the display property of this div to "block".

now, this div should contain an img element as well. When you click on the thumbnail or link, you also need to update the src attribute of the img elmenet of that of the picture you want to see.

This Simple JavaScript Thumbnail Viewer may help you with this concept.

in the example, when you hover over the thumbnail, you exectute a javascript function. You are sending the function the object itself. In the function, you are assigning the target image and assigning it the same source attribute so that the bigger target image now has the same src information about the thumbnail. Whether its a click or hover, that doesnt matter.

You can do this with jQuery also, with less coding.

You can also open a new browser window, but that's not as eleguent of a solution. It also requires that you send the URL with the image id or other information so that the new page knows what picture to display. It would be a better presentation if you show a modal popup/overlay with the bigger image.

So in summary...
you have this div on your page that is not displayed by default. it also will have absolute positioning so its not part of the normal flow of the page.

you show your thumbnails or links on your page. When you click on the thumbnail, you execute a function to take the non-displayed div and show it on the page. This div contains an image element. In the function, you target this img and simply update its src attribute. In this div, you can also contain some type of element or img that represents a close button. So that when you click on it, it changes the div's display back to "none".

Edited by JorgeM
Member Avatar for centenond

Thanks thankss u help me alot i got the idea now thanks for taking the time to help me (y)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.