search

dejanstojanovic / Facebook-Album-Browser

jQuery plugin for browsing public albums of a Facebook account
http://dejanstojanovic.github.io/Facebook-Album-Browser/
MIT License
74 stars 42 forks source link

thumb descentre #27

Open dchicon opened 9 years ago

dchicon commented 9 years ago

Hi Dejan the albumThumb are centered, but not photoThumb Taking a look js code I see:

var marginWidth = 0;

                            if (prefWidth > 0) {
                                marginWidth = (prefWidth - albumImg.width) / 2;
                            }

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: "" });

it doesn´t work: photoThumb appears alway from left to right.

Some help to center the thumb? Thanks

dejanstojanovic commented 9 years ago

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 commented 9 years ago

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: :

<!DOCTYPE html>

Tierra
``` ``` 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: 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 notifications@github.com 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 commented 9 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 notifications@github.com 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 https://github.com/dejanstojanovic/Facebook-Album-Browser/issues/27#issuecomment-135105862.

dejanstojanovic commented 8 years ago

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

emilgas commented 6 years ago

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 image

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