Facebook 'like' button ín lightbox 2 (huddletogether.com)
Graag zou ik jullie hulp willen voor het volgende:
Ik heb een pagina waar ik een overzicht van thumbnails laat zien (wenskaarten) bij het klikken hierop komt de kaart vergroot in een lightbox. Nu kreeg ik de vraag van mijn klant om in die lightbox een 'like button' te laten zien. Maar helaas is de html code van deze lightbox (denk ik) 'verstopt' door meerdere bestandjes heen. Met andere woorden; ik heb geen idee waar ik zo'n aanpassing in moet voeren.
Meer info over de lightbox :
Hier heb ik 'm vandaan: http://www.huddletogether.com/projects/lightbox2/
Hopelijk is er iemand die vaker met deze lightbox heeft gewerkt!
Groetjes Sharon
Dan kun je daarbij ook een like button plaatsen.
Vincent Huisman op 28/06/2011 15:07:27:
je kunt ook in de beschrijving de like button zetten, je moet het dan in de title zetten en de < enzo omzetten
Dat dacht ik in eerste instantie ook, maar als ik dus in de 'title' attribuut de html van de like button zet, gaat het mis. Je ziet namelijk de like button al zonder op de lightbox te drukken en er gaat iets mis met '> (die houdt hij over.) Dit is de code van de lightbox link:
<a href='images/kaarten/" .$fetch_array3['afbeelding']. "'
rel='lightbox[roadtrip]' title='" .$likebutton. "'>
Toevoeging op 28/06/2011 15:49:28:
Oetzie cookie op 28/06/2011 15:15:40:
De javascript moet je een beetje aanpassen op de plaatst van de title kun je een like button maken. Maar weet niet of je genoeg verstand hebt om dit te doen?
Als de wijzigingen in de javascript moeten waarschijnlijk niet. Ik heb al gezocht of er innerhtml gebruikt wordt wat ik snap maar het gaat via zoveel omwegen dat ik de web kwijt raak. Er zijn ook 3 javascript bestanden, waar denk je dat ik in de buurt moet zoeken?
while($fetch_array3 = mysql_fetch_array($result3)){
// Zo laat ik de kaarten in een while lus zien .... //
echo "<a href='images/kaarten/" .$fetch_array3['afbeelding']. "?kaart=" .$fetch_array3['code']."' rel='lightbox[roadtrip]' onclick='changeLink()' name='" .$fetch_array3['code']. "'>
// de onclick functie changeLink laat een innerhtml uit de .js
komen zodat de like-button verschijnt ( de html van de code staat dus daar in innerhtml) .... //
<div id='kaart'>
<img src='images/kaarten/" .$fetch_array3['tb_afbeelding']. "' style='border:0;'>
</div>
</a>";
}
Kan iemand mij verder helpen?? Ik ben nogal radeloos...
welk gedeelte moet ik omzetten en waarom? heb hier nog nooit mee gewerkt...
Alvast bedankt!
zie ook: http://www.lokeshdhakar.com/projects/lightbox2/
echo "<a href='images/kaarten/" .$fetch_array3['afbeelding']. "?kaart=" .$fetch_array3['code']."'
rel='lightbox[roadtrip]' title='<iframe src="http://www.facebook.com/plugins/like.php?app_id=240572822637604&amp;href=
//hier komt de php//
".$$fetch_array3['code']."&amp;send=false&amp;layout=button_count&amp;width=166&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:166px; height:21px;" allowTransparency="true"></iframe>'>
<div id='kaart'>
<img src='images/kaarten/" .$fetch_array3['tb_afbeelding']. "' style='border:0;'>
</div>
</a>";
op regel 152 word de div#caption aangemaakt met:
Builder.node('span',{id:'caption'}),
op regel 331 word de div#caption tag dus heletijd geupdated:
this.caption.update(this.imageArray[this.activeImage][1]).show();
als je dat nu een beetje wijzigt door bv
this.caption.html('Facebook iframe code shizzle').show();
Aan de hand van aangeklikte afbeelding weet je de url die je aan de Facebook iframe kunt koppelen
heb je al een veel betere code wat ook door HTML validator komt.
EDIT -> misschien heb ik vanavond of morgen de tijd om een werkend voorbeeld te maken.
Gewijzigd op 08/07/2011 17:09:47 door Joakim Broden
Maar ik had hiervoor de hoop opgegeven en ben dus weer verder met de title gaan kloten maar nu ik weet dat ik alles moet omzetten zal ik 't nog eens proberen.
Ik snapte alleen niet wat je met dat laatste stuk over de url weten bedoelde?
Toevoeging op 08/07/2011 17:40:20:
trouwens, als je de tijd ervoor hebt zou een werkend voorbeeld natuurlijk heel fijn zijn, of een code die me iets verder helpt want ik heb ;t gevoel dat ik er dicht bij zit :)