Photo Gallery Forums

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)

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

Perfect, thank you