CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pushkraj Lanjekar
Pushkraj Lanjekar

Reputation: 2294

How to add a lightbox to webpage links

Can anyone help me to show lightbox popup for links such as below,

1) test1 2) test2 3) test3

When anyone clicked below links it should show in jquery lightbox instead open in target blank or redirect on the same browser.

Upvotes: 0

Views: 76

Answers (2)

Prateek
Prateek

Reputation: 6975

I think this will work

<script type="text/javascript">
 $(document).ready(function() {
 $("a", ".rest-menuitem").click(
   function(event) {
    event.preventDefault();
    var elementURL = $(this).attr("href");
    $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
   });
 });
</script>

Set innerWidth and innerHeight according to your content.

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20428

if you use fancybox plugin this will works..

<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>

<script type="text/javascript">
$('#manual1').click(function() {
    var data = $(this).data('images').split(','),
        options = {
            padding : 38,
            nextEffect : 'fade',
            prevEffect : 'fade',
            type: 'image'
        };
    $.fancybox.open(data , options );
})
 </script>

Fiddle is : http://jsfiddle.net/voigtan/jJpAM/2/

Upvotes: 1

Related Questions