Popupruta för bilder
Skulle du vilja kunna länka dina små bilder i din sidebar till en större bild i en popupruta?
Eller kanske länka en text till en popupbild?
Då ska du göra så här:
Börja med att se till att du har en bild i två storlekar, en liten lagom till din sidebar (ca 200 pixlar om du har en normalbred sidebar) och en större i valfri storlek.
Ladda upp dem på t.ex. Photobucket så att de får en webadress - en direktlänk - vilket är det vi ska använda oss av.
Gå till din bloggs Layoutläge och klicka på Lägg till en gadget, välj HTML/Javascript.
Klistra in följande kod i din ruta:
<a href="http://DINSTORABILDSADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><img border="0" alt="" src="http://DINLILLABILDSADRESS"/></a>
Byt ut adresserna (de med stora bokstäver + http://) mot respektive bilds direktlänk. Din lilla bilds adress är alltså länken till den bild som ska synas i sidebaren.
I koden finns orden width och hight. Efter dem kommer siffror vilket är pixelmått och de avgör hur stor din popupruta ska vara. Om din bild är säg 500x700 pixlar så byter du förstås ut siffrorna till det. Width mot din bilds vidd, hight mot din bilds höjd.
Dessutom finns ord som scrollbar, menubar, toolbar och status. Du kan byta ut no mot yes eller tvärt om för att anpassa popuprutan efter ditt tycke och smak. Vill du att dina gäster ska kunna surfa vidare från popuprutan - ja då väljer du toolbar=yes. Vill du att de ska kunna lägga till ditt foto bland sina favoriter - ja då väljer du menubar=yes. Prova dig fram till vad som känns bäst.
Spara din gadget.
Om du istället vill ha en vanlig textlänk som leder till en bild ska du använda följande kod:
<a href="http://DIN BILDS ADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">DIN LÄNKTEXT</a>
Du klistrar in den i en HTML/Javascript gadget precis som med bild/bild-länken.
Nu kan du ju utvidga det här konceptet om du vill. Kanske länka en bild till en text, ett blogginlägg eller till en scrappad layout av samma bild. Du kan länka till vad som helst som har en webadress.
Bra,Tackar så ♥-ligt!
ReplyDeleteHej!
ReplyDeleteHar tack vare din blogg lyckats fixa en hel del med min blogg. Nu har jag dock lyckats fixa till något som blivit knasigt. Jag har i länklistan i en widget gjort så att avståndet mellan varje länk är på tok för stort. Problemet är dock att jag inte vet hur jag gör för att ändra tillbaka det. Har försökt hitta bland alla siffror och koder i HTML-koden - men självklart finner jag inte det jag söker efter. Har du någon aning om vad det är jag kan ha ändrat på?
/Klara/
Tja, du har en padding bland länkarna i sidebaren på 20em. Det är ganska mycket (em är ett flytande mått till skillnad från pixlar) kanske skulle det stå .20 alltså 0.2? Fast det är bara en gissning, det kan vara ngt annat som spökar. Men, om du vet med dig att du varit där och trixat så...
ReplyDeleteTack - det löste sig direkt!!
ReplyDeleteVad bra! :-)
ReplyDeleteKan man få till en popupruta även på korten som lägger till i bloggen? När jag klickar på dom nu så kommer jag till en ny sida och får backa skulle vilja slippa det.
ReplyDeleteAbsolut, men då får du ju också ladda upp den stora bilden på blogger, photobucket eller annat ställe först så att den får en webadress.
ReplyDeleteSedan är det lätt att växla till html-läge i redigeringsrutan där du skriver ditt blogginlägg och fixa till koden där. Det skiljer inget mot att lägga in en html-gadget.
Nej, nu skickade jag kommentaren utan att tänka ordentligt. Om du växlar till html-läge då du laddat upp en bild ser du bildens kod. Där har du ju den stora bildens adress samt den som visas i inlägget. Kopiera bildadresserna (håll ordning på vilken som är vilken) och radera koden. Klistra in popupkoden i inlägget ovan och klistra in dina bildadresser där.
ReplyDelete(Enklast klistrar du in popupkoden först kanske och flyttar adresserna, sedan raderar den första bildkoden.)
Hänger du med på vad jag menar?
Jag ska nog gå och testa själv också så att det funkar att göra det direkt med bildkoden från blogger, utan att blanda in photobucket ;-)
Blev inget bra, rutan är större än bilden... Har testat att byta bild och storlek men icke.
ReplyDeleteSkulle även vilja få text underbilden i popupen. Går det?
Ja, du måste ju ställa in hur stor ruta du vill ha i koden, du har width och hight att fixa med. Eller blev storleken fel trots att du gjort det?
ReplyDeleteDet blev fel ändå, spelade ingen roll vilken storlek jag hade så var ändå rutan mycket större än bilden
ReplyDeleteHej!
ReplyDeleteJag skulle vilja ha hjälp med en sak. Jag är inte bra på att blogga, men tror bara tror att header är det som är längst uppdär rubriken står. Har jag rätt?
Jag skulle vilja få in en bild på mig där... men fattar inte hur jag ska göra!
Hjälp!