Responsive Facebook Gallery in Prestashop with lightbox?

[Eke]

Hello,

 

I have been searching for a module that uses my facebook album to create a responsive gallery with lightbox with no luck.

 

Social Gallery plugin for wordpress would be something I really would like with comments and share, is there a way to rewrite part of social gallery to get it to work with prestashop or is there already something similar for prestashop ?

 

 

/Eke

[vekia]

hello

you just simply want to create a page in your online store, that will show pictures available on your facebook fanpage (selected album) ?
and of course you want to open these pictures in lightbox?

[Eke]

 

hello

you just simply want to create a page in your online store, that will show pictures available on your facebook fanpage (selected album) ?

and of course you want to open these pictures in lightbox?

 

Hello Vekia,

 

I followed your guide on how to make fancybox work on cms pages, it works great but I got a couple of problems with it.

 

I would like to add helpers to fancybox:

 

 

 

Picture wont fill upp the screen on phone size, also clicking the image will not fill the entire screen with fancybox also i would like swipe on mobile and tablet devices.

If you want to fully integrate swipe effects to your fancybox you just need to add the following lines to your fancybox.js code::

Copy the code into the _setContent function (recommended is on the very end of that function)::

$(F.outer).on('swipeleft', function() {
F.next();
});
$(F.outer).on('swiperight', function() {
F.prev();
});
To make this work you need two lightweight jquery plugins:

http://plugins.jquery.com/event.move/
http://plugins.jquery.com/event.swipe/

That's it. Have fun

How do i add more jquery files to prestashop ?

 

 

I also found a way to get the facebook photo viewer with fancybox here:

http://stackoverflow.com/questions/20186456/making-facebook-photo-viewer-with-fancybox-2

 

but I dont know how to take this into prestashop and make it work.

 

I also found a couple of helpers for adding FB-album but I can't test them out, when I dont know how to add helpers to prestashop.

 

Here is my gallery page btw http://matonostalgi.se/en/content/6-gallery

<script>// <![CDATA[
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'elastic',
    		closeEffect	: 'elastic',
		prevEffect	: 'fade',
		nextEffect	: 'fade',
		closeBtn		: false,
   });
});
// ]]></script>
<a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg" width="285" height="214" alt="" /></a> 

<a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg" width="285" height="214" alt="" /></a> 

<a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg" width="285" height="214" alt="" /></a> 

<a class="fancybox" rel="gallery1" href="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg"> <img src="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg" width="285" height="214" alt="" /></a>

My end result would be too have a album showing just like facebook and having that same old lightbox with the comment section next to it like this.

 

Would really appreciate if you could help me accomplice this.

 

 

 

[Eke]

hello

you just simply want to create a page in your online store, that will show pictures available on your facebook fanpage (selected album) ?

and of course you want to open these pictures in lightbox?

 

Hello,

 

I have managed to get the comment box to show in the fancybox but its not connected to facebook ?

 

If i put a post from the website it will not show on facebook and if I add a picture with comments on facebook it will not show comments on the website.

 

http://matonostalgi.se/en/content/6-gallery

 

I currently have a fixed size on the comment box I would really want some help to get it responsive any idea how to fix that ?

 

My Contentbox

 

 

<script>// <![CDATA[
'<div id="fb-root"></div>'
$(document).ready(function() {
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

(function ($, F) {
    F.transitions.resizeIn = function() {
        var previous = F.previous,
            current  = F.current,
            startPos = previous.wrap.stop(true).position(),
            endPos   = $.extend({opacity : 1}, current.pos);

        startPos.width  = previous.wrap.width();
        startPos.height = previous.wrap.height();

        previous.wrap.stop(true).trigger('onReset').remove();

        delete endPos.position;

        current.inner.hide();

        current.wrap.css(startPos).animate(endPos, {
            duration : current.nextSpeed,
            easing   : current.nextEasing,
            step     : F.transitions.step,
            complete : function() {
                F._afterZoomIn();

                current.inner.fadeIn("fast");
            }
        });
    };

}(jQuery, jQuery.fancybox));

$(".fancybox").fancybox({
        nextMethod : 'resizeIn',
        nextSpeed  : 250,
        prevMethod : false,
         padding : [0,350,0,0],
        helpers: {
                title: {
                        type: 'inside', 
                        position:'top',
                                }  
                        }, 
        beforeShow: function () {
                this.title = '<div class="fb-comments" data-href="' + this.href + '" data-num-posts="3" width="100%"></div>'
                },
        afterShow: function () {
                FB.XFBML.parse();
                $.fancybox.update(); // resize after show
                }
});
});
// ]]></script>
<a title="1st title" class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg"><img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg" width="285" height="214" alt="first" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg" width="285" height="214" alt="" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg" width="285" height="214" alt="" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg"> <img src="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg" width="285" height="214" alt="" /></a> <a title="test" class="fancybox" rel="gallery1" href="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xtp1/t31.0-8/11133991_1584380108506267_2355790075482831957_o.jpg"> <img src="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xtp1/t31.0-8/11133991_1584380108506267_2355790075482831957_o.jpg" width="285" height="214" alt="" /></a>

 

 

 

 

My jquery.fancybox.css

 

 

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	/* position: relative; */
	text-shadow: none;
	z-index: 8050;

	position:absolute; 
	right: 0px;
	width: 350px;
    top: 0px;

}