Fancybox & jsQuery for dummies

Jag snubblade över en lightboxvariant häromdagen som heter FancyBox som jag nu har försökt att få till en bra stund - utan framgång. I grund och botten brister det nog i rena programmeringskunskaper :e men eftersom jag är grymt sugen på att få scriptet att fungera så slänger jag ut en chansfråga här.

Om man kikar på "How to use" så strandar jag redan på steg ett. Scriptfilerna som ska inkluderas saknas i arkivet jag tankade hem. Är det standardfiler för jsQuery som jag måste plocka hem från någon annanstans? Steg tre förstår jag inte heller, ska den koden in i headern också i en script-tag?

Som sagt, vild chansning det här men den som har stenkoll på läget får gärna berätta för mig vad jag inte gör rätt, för det vill jag gärna veta. Jag kräver ingen färdig lösning, bara en bättre guide än den författaren knarkade ihop. :e ;)

Tack på förhand!

Hey,

I paketet fancybox_1.0.0.zip, som jag antar att du laddat ner, har du faktiskt samtliga filer inklusive jQuery.
Problemet verkar vara att sökvägen de använder inte stämmer med filnamnen i paketet. Sedan ser jag nu att jquery.metadata.js inte finns överhuvudtaget.

Följande skulle vara mer korrekt i relation till .zip filen man tar hem:

/* required */ 
<script type="text/javascript" src="fancybox/jquery-1.2.3.pack.js"></script> 
<script type="text/javascript" src="fancybox/jquery.fancybox-1.0.0.js"></script> 
/* optional */ 
<script type="text/javascript" src="fancybox/jquery.pngFix.pack.js"></script> 
<script type="text/javascript" src="js/jquery.metadata.js"></script> <!-- problem, finns ingen metadata.js i paketet -->

Men metadata filen vet jag inte hur du ska lösa. Verkar vara fler som har samma problem (kolla kommentarerna längst ner på sidan)

Ok, I have solved part of my problem in that I was missing the metadata plugin.

Kodexemplet ska in i headtaggen med <script type="text/javascript">... KODEN HÄR.. </script> tagg. Sedan pekar denna kod på specifika element i själva
t.ex.

p#test1 a -->

<p id="test1"><a href="/img/examples/1_b.jpg"><img alt="" src="/img/examples/1_s.jpg" /></a></p>

Detta kanske blev lika knarkat hehe, men kolla källkoden på den sidan, så förstår du nog exemplet bättre.
Hoppas detta blir en knuff i rätt riktning iaf :)

...

Vad fan hände med mitt inlägg jag skrev här igår? Postade jag eller, hamnade det i fel tråd eller har jag drömt?

Nåja, försöker ta mig tid att göra om och göra rätt denna gången.

http://okkido.net/dev/fancybox
http://okkido.net/dev/fancybox/fancybox.zip

Här är alla nödvändiga filer inkluderade. Javascriptet för att trigga fancybox ligger i jquery.initialize.js istället för att ha det direkt i HTML:en. Jag låter google hosta en minifierad version av jQuery, men det går bra att ersätta den med en egen nerladdad version hos jquery.com om man hellre känner för det.

Filstrukturen som jag använder mig av är:

root
index.html
lib/img/alla-bilder
lib/css/fancy.css
lib/js/alla-js-filer.

Det går att ändra hur man vill men se till att alla länkningar blir rätt.

"Jag kräver ingen färdig lösning". :e

Tackar och bockar Okkido, jag ska testa det här senare ikväll! (y)
Tack dreas också, som tog sig tiden! :f

Nu har jag testat lite och det ser ut att fungera prima! Stort tack!

Ursäkta bumpen, men är det någon som fått detta script att
fungera fullt ut?

Om jag länkar till en annan sida på min domän, ex http://www.doman.se/index.php?id=sida2 så får jag upp den med i en "box" även fast jag inte angett att jag skall ha det.

Nån som har nått förslag?

Länkar du med en bild? Jag har aldrig använt just den här, men om den söker efter img-taggen så funkar det inte att länka bilder.

Man måste sätta en klass på dom bilder som ska visas i en box och ändra så att skriptet söker efter den klassen istället. Och sen ha en annan klass på dom bilder som inte ska visas i en box.

Jag hittade lösningen med lite hjälp av google.
Så nu fungerar det som det skall :)

Det vore bra om du delade med dig av lösningen här också till nästa som har samma problem.

Detta vore ett sätt för AndreasN att säga att endast visa bilder i fancebox som har ex en class som: .make-me-fancy eller något. :)

			$(document).ready(function(){ 
				$("a.make-me-fancy").fancybox({
					'hideOnContentClick': true
				});
			});

<a href="/img/1_b.jpg" title="A fancy image from north of Sweden." class="make-me-fancy"><img alt="" src="/img/1_s.jpg" /></a>

Jag får det inte att fungera i IE7, skuggan runt bilden i expanderat läge blir svart, verkar som den inte hittar fancy_shadow_xx.png bilderna. Det fungerar i IE6 och Firefox. Är det någon som har samma problem?