seregarem wrote:And what about inserting "like" in fancybox?
Sorry for the delay. I was enjoying a nice long holiday. But here it is. The code used for the like button.
I don't want to call myself anything near of a programmer. So I hope I can somewhat clearly explain what I meshed together here.
You have to use an iframe version of the code. The newer versions of the facebook buttons don't like to be executed through javascript. I used the default FancyBox theme and changed the following:
In the gallery Template Source this is my foreach for the images:
Code: Select all
{foreach from=$images item=image}
<div class="img">
{if $image->isdir}
<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
{$image->titlename}
{else}
<a class="group {$image->fileid}" href="{CGSmartImage src=$image->file|escape:'url'|replace:'%2F':'/' filter_resize='h,600' notag=1 noembed=1}" title="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="gallery-{$galleryid}" id={$image->fileid}><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/if}
</div>
{/foreach}
The Template Javascript:
Code: Select all
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$("a.group").each(function() {
var element = this;
$(this).fancybox({
'titleFormat' : function() {
var likeurl = encodeURI(location.protocol + '//' + location.host + location.pathname + '?foto=' + element.id);
var origineelurl = element.title;
return '<span id="fancybox-title-over"><__iframe src="http://www.hyves.nl/respect/button?url=' + likeurl + '&counterStyle=horizontal" style="border: none; overflow:hidden; width:120px; height:80px;" scrolling="no" frameborder="0" allowTransparency="true" ></__iframe><__iframe src="//www.facebook.com/plugins/like.php?href=' + likeurl + '&send=false&layout=button_count&width=150&show_faces=false&action=like&colorscheme=dark&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:80px;" allowTransparency="true"></__iframe><a href="' + origineelurl + '" target="_blank">Originele grootte</a></span>';
},
'speedIn': 300,
'speedOut': 300,
'overlayColor': '#000',
'overlayOpacity': 0.3,
'titlePosition': 'over',
'centerOnScroll': true,
'onComplete':function(){_gaq.push(['_trackEvent','Fotoalbums','Foto-bekijken', this.title]);}
});
});
});
var hash = window.location.search.substring(6);
$(document).ready(function() {
$("a."+ hash).trigger("click");
});
</__script>
The above makes sure the buttons appear. The url adds a var at the end of the URL: '?foto=' + element.id
This element.id is the unique number of the image in the Gallery database. So each like button links to a unique URL with the image number in it.
If this var is in an URL, this triggers the last lines of code. So a click from facebook automatically opens the liked photo in the Fancybox frame. If you want to change the 'foto' text in the URL, make sure you also change the substring(6) count to match the length of your var name.
As last addition, I added some additional META data to URL's with that var. In the page header I added the following code that also checks if the var is available:
Code: Select all
{if $smarty.get.foto != ''}
{capture assign=wijknaamlengte}{$cgsimple->self_url()|strpos:"/":36}{/capture}
{math equation="x - y" x=$wijknaamlengte y=36 assign=wijknaamlengte}
<meta property="og:title" content="Foto van Sonrise {$cgsimple->self_url()|substr:36:$wijknaamlengte|capitalize}" />
<meta property="og:type" content="sport" />
<meta property="og:url" content="{$cgsimple->self_url()}" />
<meta property="og:image" content="http://www.sonrisehaarlem.nl/uploads/images/GalleryThumbs/{$smarty.get.foto}-1.jpg" />
<meta property="og:site_name" content="Sonrise Haarlem" />
<meta property="og:description" content="De Sonrise sportweek in Haarlem wordt gehouden van 23 t/m 27 juli op 12 locaties. Bekijk hier de foto's en volg de verhalen." />
<meta property="fb:admins" content="1229648146" />
{/if}
Again, if you change the name of the var, change the top line here: $smarty.get.foto
The math and equations are intended to get the album name from the URL and work that into the META data. The one important META tag here is og:image. This links to the thumb of the image. If facebook reads this META data, the image it shows in the timeline is the thumb of the actual image someone liked.
Thanks for showing
I hadn't noticed the facebook init created a code not allowed in the head of the document. Moved it down a couple of lines into the body.