Search…

X3 Photo Gallery Support Forums

Search…
 
MikeR
Experienced
Topic Author
Posts: 216
Joined: 29 Sep 2006, 09:58

Facebook widget

30 Aug 2012, 13:16

Hello Karl, Nick

I noticed that the social facebook widget (on the right top of the screen) doesn't display the numbers of "fans"

When I check https://www.photo.gallery/demo/x2/#/start/ on a PC, I have these results :

- firefox : the number of "fans" is not displayed, there's only the facebook's icon
- IE 9 : the number of "fans" is not displayed, there's only the facebook's icon

But it works well with safari and google chrome, I can see that Imagevue has 598 "fans".

I can't check for Mac.

Can you help ? I have the same problem on my website (v2.8.3)
Attachments
0027.jpg
on google chrome & safari
0027.jpg (6.24 KiB) Viewed 2077 times
0026.jpg
0026.jpg (4.03 KiB) Viewed 2077 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Facebook widget

31 Aug 2012, 01:24

Good observation. This is in fact some issue with the Facebook widget in some browsers, where it refuses to display if the item itself is hidden when it is loaded. I had to add a workaround fix for this, outlined below and already included in the documentation.

Changes are outlined in bold. First, add two new lines to the CSS:
/* CSS Social Thing */
#social-thing {position: absolute; right: 120px; top: 10px; display: none;}
.rounded {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rounded-up {-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;border-top-right-radius: 3px;}
.background { background: url(halfblack.png);}
.item {float:left;}
.item img {border: none;}
.item img.smallicon {margin:5px; vertical-align:bottom;}
.item img.largeicon {position: absolute; left: 15px; top:15px;}
.item .service {position: absolute; right: -105px; top: 26px; height: 62px; display: none;}
.item .service * { white-space:nowrap !important; }
#facebook-layer.item .service {display: block; top: -100px;}
#facebook-layer.item.setpos .service {top:26px;}

#facebook-layer .service .container {margin: 19px 0 0 62px;}
#twitter-layer .service .container {margin: 21px 0 0 62px; width: 360px;}
#google-layer .service .container {margin: 20px 0 0 20px; width: 200px;}
#imagevue-layer .service .container {margin: 21px 25px 0 62px;}
#imagevue-layer .service .container a {color: #FFFFFF; text-decoration: none; font:15px Optima,Candara,arial,sans-serif;}

Then, amend one line in the javascript part of the HTML code:
$(selector).mouseenter(function () {
$("#social-thing").removeClass("background");
$(selector).addClass("background setpos");
$(".service", selector).fadeIn(150);
});
 
MikeR
Experienced
Topic Author
Posts: 216
Joined: 29 Sep 2006, 09:58

Re: Facebook widget

11 Sep 2012, 09:01

Perfect, thank you ;-)