CODEWITHSUNDEEP
javascriptjqueryhtml
vimal kumar
vimal kumar

Reputation: 325

image popup in javascript

i need to give popup for all the images displayed under a div i tried to add div before and after image tag but its not appending properly

this is my following code

<div class="description">
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0"></div>

Expected output

<div class="description">
<div class="fancybox"> //class to be added

<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>

Upvotes: 0

Views: 1842

Answers (3)

vimal kumar
vimal kumar

Reputation: 325

Thank you for your suggestion friends i have found a simple solution for that instead of using div i user a tag and fancy box in it the following code working fine for me

$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');

  <script type="text/javascript">
    // FANCYBOX JS
 $(document).ready(function(){
    $(".fancybox").fancybox({
        // openEffect: "none",
        // closeEffect: "none"
    });
});
 </script>

Upvotes: 0

James Douglas
James Douglas

Reputation: 3446

You can use some JQuery for this, but you have to change the html code a bit.

See snippet 

$('.imagepopup0').click(function() {
  $('.outer').toggle('show');
  $('.fancybox').toggle('show');
});
/* Not needed, just for show */
.fancybox {
  background-color: blue;
}
.description {
  background-color: red;
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
  <img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
  <div class="fancybox" style="display: none;">
    <img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
  </div>
</div>

JSFiddle

Upvotes: 1

Sreetam Das
Sreetam Das

Reputation: 3409

Original answer: jquery, wrap elements inside a div

Could use the .wrapAll() method:

$('#imagepopup0').wrapAll('<div class="fancybox"></div>');

The wrapAll() method will wrap all the elements matched into another element whereas the .wrap() method which wraps the matched elements individually.

Upvotes: 0

Related Questions