Member Avatar for amarula25

I wonder if you can help me i have this website. i want a script like if you click a image a overlay must display without leaving the content like on www.madonna.com on her candy wall. can this be done?

  • 2 Contributors
  • 5 Replies
  • 122 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by amarula25

Dani AI

Generated

wanted the candy‑wall effect: click a thumbnail and show a full image in an in‑page overlay without leaving the page. is right that JavaScript is involved, but there are three practical paths depending on time and skill: use a ready-made lightbox/modal plugin for speed, build a small custom CSS+JS component for full control, or use the native <dialog> element where supported (see the MDN reference at dialog — HTML Living Standard).

A concise, reliable workflow for a custom solution:

  • Mark each thumbnail with a data attribute pointing to the large image or content.
  • Create a single overlay element (fixed, full-viewport, semi-opaque backdrop) and an inner panel for the image or HTML.
  • On click, set the overlay content, add an open class (or call showModal() for <dialog>), and prevent body scroll.
  • Provide a visible close control, close on ESC, and remove or hide the overlay on close.
  • Handle focus: move focus into the overlay, trap it while open, and restore focus on close. For accessibility guidance use the WAI‑ARIA dialog pattern (see WAI ARIA APG — Dialog).

Minimal <dialog> pattern example:

<button class="thumb" data-src="big.jpg"><img src="thumb.jpg" alt="..."></button>

<dialog id="overlay">
  <button id="close">Close</button>
  <img id="overlayImg" src="" alt="">
</dialog>

Use JS to set #overlayImg.src and call overlay.showModal() / overlay.close(); add a polyfill for older browsers.

Troubleshooting tips: watch z-index stacking and position on parent elements; disable background scrolling (body overflow) while open; if thumbnails are added dynamically use event delegation; check plugin compatibility with your jQuery version if you go that route; test keyboard navigation and screen‑reader behavior. If the site needs the Madonna mosaic layout as well, combine a grid/masonry layout with the overlay approach and lazy‑load large images for performance.

Recommended Answers

All 5 Replies

Member Avatar for cpeeyush1

yes this can be done surly but for doing this you shold have a good knowelge of java scripts
i will send you the complete scripts but wait for some time

but i think you should use google and you will surly find that scripts(java scripts)
-PC(INDIA)

Member Avatar for amarula25

what should i search for? overlay javascripts?

Member Avatar for cpeeyush1

you should search about boxes in java scripts
but the best one is that you shold read ebook "Head first Java scripts" which you can get from headfirstlabs web site but if you want free then go on google or on rapid share in this book you will surely get this metod in first three chaptor

go and read it
-PC(INDIA)

Member Avatar for amarula25

well it is not easy to find it i will look

Member Avatar for amarula25

I got it thanx

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.