[JS/Fancybox] Fancybox vanaf een input type met onclick

[Anoniem: 426269]

Met onderstaande code kan ik een fancybox oproepen en dat gaat goed.

code:

<script type="text/javascript">
    $(document).ready(function() {
    $('.fancybox').fancybox();
    });
</script>

<a class="fancybox fancybox.iframe" href="iframe.html">Kies kleur</a>

Maar nu wil ik hem oproepen vanaf een input veld (type=text). Dit omdat er een popup met mogelijkheden te voorschijn moet komen die in dat inputveld gezet kan worden (dat stukje is wel al gelukt).

Maar als ik de onderste regel vervang door zoiets

code:

<input type="text" class="fancybox fancybox.iframe" name="" onclick="iframe.html" id="" value="" >

of zoiets

code:

<input type="text" class="fancybox fancybox.iframe" name="" onclick="iframe.html" id="" value="" >

dan werkt het helaas niet. Je krijgt dan de foutmelding 'The requested content cannot be loaded. Please try again later.' De fancybox komt wel naar voren maar hij kan het frame niet vinden, dat gewoon in de root staat en dat met de normale regel via a href wel gewoon werkt.

Als je de onderste regel vervangt door

code:

<input type="text" class="fancybox fancybox.iframe" name="" onclick="document.location.href='iframe.html'" id="" value="" >

Dan wordt het frame wel geladen, maar blanco. De Fancybox wordt dan helaas overgeslagen.

Dus er gaat wat goed fout. Iemand misschien wat hulp?

[RM-rf]

je zou moeten opzoeken wêlke handeling fancybox precies koppelt aan het klikken op een link en welke bij de init aan het element toegevoegd wordt (de exacte method om de fancybox te openen)


als het je gewoonweg te veel zoekwerk is, zou het quick-n-dirty te doen zijn door naast de input een verstopte klik-link te hangen en bij het klikken op de input een click-event op die verborgen link op te roepen:

code:

<input type="text" name="" onclick="$('#mijnlink').click();" >

<a class="fancybox fancybox.iframe" href="iframe.html" 
   id="mijnlink" style="display:none"></a>

[TheNephilim]

Colorbox is ook een goed alternatief, mocht het niet lukken. Colorbox is ook commercieel gratis inzetbaar!

[Anoniem: 426269]

Ha, dank je , RM-rf. Je 'quick-n-dirty' manier werkt in elk geval! De andere manier uitpluizen zal ik zeker nog een keer doen. Ik moet sowieso eigenlijk nog die hele jQuery eens goed bestuderen want ik gebruik het altijd wel, maar het is meer kopie/plak als een robot dan dat ik het eigenlijk echt snap. Soms heb ik bijvoorbeeld 2 jquery dingen nodig op 1 pagina en dan geeft dat weer conflicten met elkaar of het werkt pas als ik hem 2 keer inlaadt, wat natuurlijk helemaal uit den boze is.

En TheNephilim ook bedankt, ik wist niet dat je voor Fancybox 2 moest betalen, ik had hem nog nooit hoeven gebruiken. Ik zie dat versie 1 wel gratis is maar dus Colorbox (waar ik wel al eens mee had gewerkt) ook. Van Fancybox vond ik het wel handig dat het window sluiten icoon rechtsboven zit i.p.v. onder. Maar dat is natuurlijk ook aan te passen...

[TheNephilim]

Anoniem: 426269 schreef op donderdag 17 januari 2013 @ 12:24:

En TheNephilim ook bedankt, ik wist niet dat je voor Fancybox 2 moest betalen, ik had hem nog nooit hoeven gebruiken. Ik zie dat versie 1 wel gratis is maar dus Colorbox (waar ik wel al eens mee had gewerkt) ook. Van Fancybox vond ik het wel handig dat het window sluiten icoon rechtsboven zit i.p.v. onder. Maar dat is natuurlijk ook aan te passen...

Bij Colorbox heb je meerdere 'examples' met verschillende 'layouts', er zit er vast een van je gade bij.

Nou ben zelf een tijd geleden druk bezig geweest met het zoeken na een 'lightbox', dat is immers waar je op moet zoeken wil je iets dergelijks hebben. Na een groot aantal verschillende lightboxes, kwam ik Colorbox tegen. Gratis, simpel in gebruik en doeltreffend met de mogelijkheid om html in te laden. Helemaal compleet dus, maar nog steeds heel simpel.

Voor enkele projecten hebben we voor Colorbox een eigen 'layout' gemaakt zodat deze netjes bij de website past.

[Anoniem: 426269]

O ja, krijg nou wat, example 2 is lekker minimalistisch en heeft het kruisje rechtsboven. Toppie!