thumb descentre about facebook-album-browser

[dejanstojanovic]

Hi, I checked with Chrome, Firefox and Edge on Windows and it looks fine. Can tell me which browser are you checking with?
I saw couple of issues reported for Safari on MAC, since I'm a PC guy I haven't test much on Apple devices

[dchicon]

Hi Dejan.
I try to implicate an html page from an app template (blanggo.com).
When I put the codel into the html page, and i save it, automattily the code is transformed with this:
:

<title>Tierra</title> <style type="text/css">body{background-image:url(); background-color:#000000; } a{} a:visited{} </style> <title></title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="http://www.applicare.es/php/tc/jquery.fb.albumbrowser.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
      $(".fb-album-container").FacebookAlbumBrowser({
            account: "TIERRACAFE",
            accessToken: "871028626302917|D52bS7KyJaluNK6KH4YgzmQLcRI",
            skipAlbums: ["Profile Pictures", "Timeline Photos"],
            //onlyAlbum: "10150310813623951",
            showComments: true,
            commentsLimit:3,
            showAccountInfo: true,
            showImageCount: true,
            showImageText: true,
            shareButton: true,
            albumsPageSize: 0,
            photosPageSize: 0,
            lightbox: true,
            photosCheckbox: true,
            likeButton: true,
            shareButton: true,
            addThis:"ra-50360b776f77c6a6",
            photoChecked: function(photo){
                console.log("PHOTO CHECKED: " + photo.id + " - " + photo.url + " - " + photo.thumb);
                console.log("CHECKED PHOTOS COUNT: " + this.checkedPhotos.length);
            },
            photoUnchecked: function (photo) {
                console.log("PHOTO UNCHECKED: " + photo.id + " - " + photo.url + " - " + photo.thumb);
                console.log("CHECKED PHOTOS COUNT: " + this.checkedPhotos.length);
            },
            albumSelected: function (photo) {
                console.log("ALBUM CLICK: " + photo.id + " - " + photo.url + " - " + photo.thumb);
            },
            photoSelected: function (photo) {
                console.log("PHOTO CLICK: " + photo.id + " - " + photo.url + " - " + photo.thumb);
            }
        });

    });
</script>

and it works ok, but when I click a Thumb into a album, the photo that returns is the Facebook original size, ( it´s out of the screen) and facebook share and add this share did,t appears.
But when I turn off addthis sharebuttoms option, the size it´s ok, but addthis and Facebook adoptions didn´t appears:

showComments: null,
commentsLimit:3,
showAccountInfo: true,
showImageCount: true,
showImageText: true,
shareButton: true,
albumsPageSize: 0,
photosPageSize: 0,
lightbox: true,
photosCheckbox: null,
likeButton: true,
shareButton: null,
addThis:"ra-50360b776f77c6a6",

I try to put an iframe like this:

<iframe src="http://www.applicare.es/php/src/test src.html" max-width="100%" height:"auto"=""></iframe>

and it works, (return size photo thumb, addthis & Facebook like&share), but in this case the problem is that lightbox appears always on the top of the screen, and the arrows in the middle ( i´m looking the way to aligned the arrows w with the lightbox, or implement lightbox transition with finger slide).

post data: sorry about my english

thanks

El 21/08/2015, a las 13:08, Dejan Stojanovic [email protected] escribió:

Hi, I checked with Chrome, Firefox and Edge on Windows and it looks fine. Can tell me which browser are you checking with?
I saw couple of issues reported for Safari on MAC, since I'm a PC guy I haven't test much on Apple devices

—
Reply to this email directly or view it on GitHub.

[dejanstojanovic]

Hi, I see what's the problem now. I'll try to fix the alignment for the thumb but for the light box it's something I was not able to solve with css.
I'll give it a try to fix with js

[dejanstojanovic]

@dchicon I checked with the test page and it looks like some of your styles are interfering with plugin styles. Will try to find which ones are causing the issue.
Can you confirm that you are using the latest script ans CSS from the repository? Please take the latest, deploy and let me know when you finish that so I can compare code and layout with the one from the repository.

[dchicon]

Hi Dejan.
Yes, i´m using the latest scripts and css.

About the descentered thumbs, I´ve got it.
For a 100px x 100 px thumb i change the script code like this:

var photoThumb = $("", { style: "margin-left:" + marginWidth + "px;display:none;", "data-id": $(result.data).get(a).id, class: "fb-photo-thumb", "data-src": albumImg.source, src: "" });
Now
var photoThumb = $("", { style: "margin-left:" + (prefWidth - albumImg.width) / 4 + "px;display:none;", "data-id": $(result.data).get(a).id, class: "fb-photo-thumb", "data-src": albumImg.source, src: "" });

It´s looks like marginWidth did´t work.

I´m still have the problem with my app (in localhost the plugin works perfectly) :
After hundreds of test and combinations, the problem is when the likeButton option is activated:

1. i f i active it, the image that Facebook returns it´s the original size ( css does´t run) and Facebook & addthis does´t appears
2. but if i don´t active it, the the photo size is correct (css runs), but addthis doesn´t appears.

Any idea?

El 26/8/2015, a las 18:50, Dejan Stojanovic [email protected] escribió:

@dchicon https://github.com/dchicon I checked with the test page and it looks like some of your styles are interfering with plugin styles. Will try to find which ones are causing the issue.
Can you confirm that you are using the latest script ans CSS from the repository? Please take the latest, deploy and let me know when you finish that s I cn compare code and layout with the one from the repository.

—
Reply to this email directly or view it on GitHub #27 (comment).

[dejanstojanovic]

Hi @dchicon,
Did you manage to find the solution for your problem?

[emilgas]

Any picture that is not square it is aligned at the center, which cuts off the head. however on facebook they align it at the top. Check out the pictures.

Here is what my actual facebook gallery looks like

and here is what the gallery looks like on my website. Can't figure out how to align the thumbnail to the top