How to open a link in a lightbox?

[Borax]

I would like to open facebook share page in a lightbox? Is Prestashop using fancybox or thickbox by default? And how can I trigger it from a link in product-list.tpl?

 

www.istanbuldabuhaftasonu.com

Edited June 3, 2014 by boragursel (see edit history)

[Rolige]

Since PS 1.5 ps use fancybox, there is a lot of information about this plug-in in google, a simple usage would be:

<script type="text/javascript">
    $('document').ready(function(){
        $('#link').fancybox();
    });
</script>

<a id="link" href="#content">Show content</a>

<div id="content">
    Content here....
</div>

[Borax]

I want to open the page to the link below in fancybox. How can I do?

 

<a href="http://api.addthis.com/oexchange/0.8...

 

Will I use a class, which?

Do I have to add any other code?

Edited June 3, 2014 by boragursel (see edit history)

[Rolige]

You need to add the option of iframe, here a simple example loading an external or internal url: http://jsfiddle.net/Bzn99/

More documentation in: http://fancyapps.com/fancybox/

 

Good luck

[Borax]

Below code opens the fancybox page, writes "contacting Facebook..." and goes to white. What do you think the problem is. Thanks for your help.

 

The link is:  http://istanbuldabuhaftasonu.com/12-cumartesi-istanbul-etkinlikleri

(I also added the official facebook share button, but I prefer the addthis api)

 

-------------------

 

<script type="text/javascript">
    $(document).ready(function() {
        $('.fancy').fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

 

<div class="fb-share-button" data-href="{$product.link|escape:'html':'UTF-8'}" data-type="button_count">
</div>

<!-- AddThis Button BEGIN -->
<a class="fancy" href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url={$product.link|escape:'html':'UTF-8'}&rel={$product.link|escape:'html':'UTF-8'}&pubid=ra-538cf86d20af3c18"><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook" /></a>

<a class="fancy" href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbx32nj-1.0&url={$product.link|escape:'html':'UTF-8'}&pubid=ra-538cf86d20af3c18"><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png" border="0" alt="Twitter" /></a>

<a class="fancy" href="http://www.addthis.com/bookmark.php?source=tbx32nj-1.0&=300&pubid=ra-538cf86d20af3c18&url={$product.link|escape:'html':'UTF-8'}" target="_blank"  ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/more.png" border="0" alt="More..." /></a>
<!-- AddThis Button END -->

[Rolige]

Please take a look at my example on jsfiddle, you need to add some required classes in the link.

[dnugent]

OK that works GREAT, but how do you JUST get the page and NOT the whole site with it in there?

[Shad86]

I don´t think it´s still actual but let your link end with ?content_only=1

Like website.bla/site?content_only=1

 

 

I try the same but on Presta 1.7, any chance to let it run there too?