• User Attivo

    LightBox su testo linkabile

    è possibile applicare un effetto lightbox a un testo linkabile?
    Vorrei al posto del classico thumbs_image un link di testo che faccia aprire il lightbox.

    Non riesco a farl funzionare perche quando sembra che il lightbox sta per aprirsi rimane in fase di caricamento e non si apre.

    </head>

    <body>

    <h2 id="example">Example</h2>
    <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
    <div id="gallery">
    <ul>
    <li>
    <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
    <li> <a href="#">contattaci
    </a></li>
    </a>
    </li>

    </ul>
    

    </div>

    </body>
    </html>

    Il lightbox funziona perfettamente con un immagine al posto del testo linkabile.


  • Moderatore

    Si, è possibile applicare l'effetto Lightbox su un testo linkabile.

    Io l'ho fatto svariate volte.
    Dal codice che hai postato non leggo l'attributo rel; che io sappia, il Lightbox per funzionare ha bisogno di quell'attributo nel tag a, sia che esso venga associato ad un'immagine che ad un testo.

    Mi posti il codice del Lightbox con le immagini che dici funzionare?


  • User Attivo

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>

    <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
    
    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery{
        background-color: #444;
        padding: 10px;
        width: 520px;
    } ul { list-style: none; } ul li { display: inline; } ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    } ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color:;
    } ul a:hover { color:; }
    </style>
    

    </head>

    <body>

    <h2 id="example">Example</h2>
    <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
    <div id="gallery">
    <ul>
    <li>
    <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
    <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
    </a>
    </li>
    </ul>
    </div>

    </body>
    </html>


  • Moderatore

    Mi sa che questo Lightbox che usi tu non funziona senza le immagini, a meno che non venga modificato il JavaScript, ma in questo non posso aiutarti mi spiace. 😞

    Potresti provare ad usare questo: http://www.huddletogether.com/projects/lightbox2/

    In questa pagina c'è il link di download del file .zip, e tutte le istruzioni per usarlo. Questo dovrebbe funzionare anche con il testo all'interno del tag a href al posto dell'immagine. 😉