Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di crow
    Registrato dal
    Dec 2009
    Messaggi
    174

    FancyBox adattato a più hyperlink

    Salve, ho realizzato un fancybox nel mio sito web e mi funziona alla grande, ma ho una necessità, ovvero quella di applicarlo per 2 hyperlink i quali richiamano 2 pagine di dimensioni totalmente diverse, per cui vorrei adattarlo a 2 diverse dimensioni.
    Di seguito il mio codice

    <script type="text/javascript">
    $(document).ready(function() {
    $("a[rel=iframe]").fancybox({
    'width': 800,
    'height': 700,
    'showNavArrows': false,
    'autoScale': false,
    'transitionIn': 'fade',
    'transitionOut': 'elastic',
    'type': 'iframe'
    });
    });
    </script>

    Di seguito lo richiamo nei miei hyperlink:
    HLChisiamo.Attributes.Add("rel", "iframe")
    HLDoveSiamo.Attributes.Add("rel", "iframe")

    In questo caso mi apre per entrambi una pagina di 800 * 700, e mi va bene per il primo hyperlink, ma per il secondo non va bene, ho bisogno di molto meno spazio, per cui vorrei adattarlo a 2 diverse dimensioni.
    Come posso fare??

  2. #2
    e si perchè tu applichi la funzione fancybox con questo selettore
    $("a[rel=iframe]").fancybox({ ... });

    in questo modo applichi gli stessi parametri a tutti i link che hanno "rel=iframe".

    Ti conviene fare cosi :
    Assegna un id ad ogni tuo link e poi applica la funzione fancybox due volte separatamente con i parametri height e width differenti

    codice:
    <script type="text/javascript">
    $(document).ready(function() {
           $("#link1").fancybox({
                 'width': 800,
                 'height': 700,
                 'showNavArrows': false,
                 'autoScale': false,
                 'transitionIn': 'fade',
                 'transitionOut': 'elastic',
                 'type': 'iframe'
             });
    
            $("#link2").fancybox({
                 'width': 600,  // cambia la dimensione per il secondo box io ho messo per esempio
                 'height': 500, // 600 e 500
                 'showNavArrows': false,
                 'autoScale': false,
                 'transitionIn': 'fade',
                 'transitionOut': 'elastic',
                 'type': 'iframe'
             });
    });
    </script>
    
    <a id="link1" href="xxxxxx" />
    <a id="link2" href="yyyyy" />
    spero di essere stato chiaro. Se hai problemi fammi sapere
    Sul mio blog qualche utile risorsa per JQuery, HTML5 , CSS3 , PHP , ASP.NET , WCF SERVICE REST & SOAP ed altro ancora http://zannino1973.wordpress.com

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.