Facebook Like (en twitter) in Gallery?

[Gregor]

Hallo,

Ik heb een UDT SocialMedia die door de hele site wordt gebruikt. Nu dacht ik deze ook met de afzonderlijke foto's van Gallery te integreren, maar de UDT toevoegen aan dit stukje code bleek te simpel gedacht Een deel van de Floatbox template:

Code: Select all

<ul class="picturelist">
{foreach from=$images item=image}
    <li class="thumb">
	{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="albumnav" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
	{/if}
	</li>
{/foreach}
</ul>

Krijg het idee, na met Firebug te hebben gekeken, dat er aanpassingen in de javascript files van Floatbox nodig zijn. Klopt dat of zijn er andere mogelijkheden.

Dank!
Gregor

[Rolf]

In de nieuw gallery template PrettyPhoto zit deze optie standaard in.

[Gregor]

Whizzkid Ga ik kijken hoe ik dit in Fancy box kan krijgen....

Thanks Rolf.

[Rolf]

Denk niet dat je dat lukt.
Iedere foto heeft namelijk een eigen URL nodig om te kunnen werken, dit zit niet in Fancybox geloof ik...

Maar waarom gebruik je niet gewoon het nieuwe sjabloon in plaats van Fancybox? Kun je allicht proberen.

[Gregor]

Zit net door d ecode van Fancybox te kijken en dat is op zijn zachts gezegd een uitdaging. Goolge leert dat er meer zijn die hier vragen over hebben.

Heb naar PrettyPhoto gekeken, maar vind dat die een minder fraaie gallery en manier van weergeven van foto's heeft.

Vond wel deze post http://floatboxjs.com/forum/topic.php?id=1136 In de laatste post wordt een iframe oplossing gegeven. Vraag me af of dat een mogelijke oplossing is. Maar ergens lijkt er dan toch in een van de sources een aanpassing te moeten gebeuren, en dat is nou eigenlijk waar ik verre van wil blijven; anders werkt het tot na een update

[Rolf]

Even brainstormen en ik zie wel een mogelijkheid, maar je moet deze zelf even verder uitwerken. Ik zat te denken aan de logica die we gebruikt hebben bij de CGBlog tags https://www.cmscanbesimple.org/blog/add ... ews-module

Iedere Gallery foto heeft een eigen ID.
Als je in het Gallery Fancybox sjabloon met Twitter button een URL maakt zoals bijv.

Code: Select all

http://www.uisge-beatha.eu/foto&id={$image->fileid}

Op de pagina "foto" in de content

Code: Select all

{* Read tag parameter from page URL *}
{assign var='id' value=$smarty.get.id}

{if $id == ''}
  <!-- Default Content -->
{else}
  {Gallery img=$id}  
{/if}

Zoiets zou moeten werken...
Zo heeft iedere foto een eigen pagina, ook goed voor SEO

[Gregor]

Ik snap je welke kant je uit wilt. Punt is, dat als je op de foto klikt er als het ware een nieuwe pagina wordt geopend waarin de foto wordt getoond. Ik krijg de indruk dat dat deel wordt overgenomen door Floatbox.js

Als ik met Firebug kijk in de html, dan kan ik daar weinig van herkennen in de source van Floatbox. Het lijkt erop dat de hele foto vanuit die javascript file wordt opgebouwd, gelijk als bij PrettyPhoto. Als dit klopt, dan zou ik toch daar de aanpassing moeten doen om een tweet en facebook button te laten zien??

[deactivated010521]

----------

[Gregor]

Dank je voor je uitleg Arnoud.

De code die je in de template plaatst, is dat een vervanging van de, in mijn geval, gehele Fancybox template? Of plaats je deze in de {foreach}-loop?

[deactivated010521]

----------

[Gregor]

Zat nog even door de documentatie van FancyBox 2 te lezen. Een nog makkelijker voorbeeld voor Twitter en Facebook buttons zie: http://jsfiddle.net/G5TC3/

Dit zou wel een heel fraaie oplossing zijn. Ik ga dit uitproberen. Dank je Arnoud.

[Gregor]

Ik heb fancybox in Gallery als standaard template gemaakt en in de jquery versie op 1.7.1 gezet in de link die Arnoud gaf. Deze source in de Gallery Fancybox gezet en de oorspronkelijke jquery aanroep eruit gehaald. Ik zie in de paginasource dat Jquery 1.7.2 geladen wordt. Verwacht niet dat daar het probleem zit.

De JS-source in Gallery ziet er als volgt uit:

Code: Select all

<__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/lib/jquery/jquery.mousewheel.pack.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7
	});
});
</__script>
<__script__ type="text/javascript">
// Facebook + Tweet
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';
                
                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
                
                // Add FaceBook like button
                this.title += '<__iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></__iframe>';
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });
</__script>

Aan het Gallery css heb ik onderaan de css-code van het voorbeeld toegevoegd.

In de source van de pagina van http://www.uisge-beatha.eu/gallery/Wint ... ve/45.html zie ik wel dat de JS-code wordt geladen, maar er verschijnen geen facebook en tweet button.

In het voorbeeld zag het er eenvoudig uit Zie ik iets over het hoofd?

[Gregor]

Korte update. Dit deel van de code:

Code: Select all

<__script__ type="text/javascript">
// Facebook + Tweet
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({

aanpassen naar:

Code: Select all

<__script__ type="text/javascript">
// Facebook + Tweet
$(".group")
    .attr('rel', 'gallery')
    .fancybox({

heeft geen effect.

Het nalezen van de jquery documentatie leerde dat het bij een Document Ready zou moeten worden geladen, heb ik er dit van gemaakt:

Code: Select all

<__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/lib/jquery/jquery.mousewheel.pack.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7
	});
    
    // Facebook + Tweet
$(".group")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';
                
                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
                
                // Add FaceBook like button
                this.title += '<__iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></__iframe>';
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });
});
</__script>

Maar helaas

[deactivated010521]

----------

[Gregor]

Iets meer JS-kennis nodig Dank je wel, ga ik verder stoeien...