Effetto lightbox in homepage

[fradammacco]

Salve a tutti ragazzi

io vorrei semplicemente che, connettendosi sul mio sito web e in home page, parta automaticamente una finestra in lightbox con un messaggio importante, tipo una splashpage.
Mi spiego meglio: in rete ci sono molte risorse gratuite per creare delle finestre modali in popup con jquery, ad esempio SimpleModal http://www.ericmmartin.com/projects/simplemodal-demos/ . Io però vorrei che lo stesso effetto si possa ottenere al semplice caricamento della homepage e non cliccando su un tasto. Come posso fare? credo che si debba modificare il file js o mi sbaglio?
Grazie.

[fradammacco]

Ho installato una demo e questo è il codice js

jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("input.osx, a.osx").click(function (e) {
e.preventDefault();

$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("#osx-modal-content", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};

OSX.init();

});

[fradammacco]

Ragazzi proprio nessuno può darmi una mano?

[Vindav]

non ti basta inserirlo nel document ready?

$(function(){
$("#element-id").modal();
});

Cmq non credo proprio sia da modificare il js del plugin per una banalità come questa, al massimo ci sarà qualche opzione da passare al metodo modal, guarda la documentazione del plugin

[fradammacco]

Ho provato ad inserire questo:

<script type="text/javascript">
$(document).ready(function(){ 
$("#osx-modal-content").modal();
 });
</script>

dove "osx-modal-content" è il div che voglio che appaia al semplice caricamento della homepage ma niente....

Questo è il link di simplemodal...
http://www.ericmmartin.com/projects/simplemodal/
sto utilizzando il "OSX STYLE DIALOG". Non succede nulla! (sono ignorante in javascript se non si era capito )

Questo invece è l'html del div che voglio che appaia.

<input type='button' name='osx' value='Demo' class='osx demo'/> or Demo 
 
<div id="osx-modal-content" > 
<div id="osx-modal-title">Titolo</div> 
<div class="close">x</div> 
<div id="osx-modal-data"> 
<h2>SottoTitolo</h2> 


Contenuto</p>


contenutoContenuto</p>


contenutoContenuto</p> 
</div> 
</div>

[fradammacco]

Ragazzi non cè nessuno che possa aiutarmi? please!

[Vindav]

ho appena provato, basta questo:

$(function(){
$("#element-id").modal();
});

e funziona
controlla la console js il problema non è nel codice postato

[fradammacco]

niente non funziona....maledizione...

[fradammacco]

ho provato ad inserirlo in basso prima del tag body della pagina index...ma nulla....

[Vindav]

sovrascrivi il codice di osx.js con questo:

/*
 * SimpleModal OSX Style Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
 */

jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
                $("#osx-modal-content").modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
        },
        open: function (d) {
            var self = this;
            self.container = d.container[0];
            d.overlay.fadeIn('slow', function () {
                $("#osx-modal-content", self.container).show();
                var title = $("#osx-modal-title", self.container);
                title.show();
                d.container.slideDown('slow', function () {
                    setTimeout(function () {
                        var h = $("#osx-modal-data", self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $("#osx-modal-data", self.container).show();
                            }
                        );
                    }, 300);
                });
            })
        },
        close: function (d) {
            var self = this; // this = SimpleModal object
            d.container.animate(
                {top:"-" + (d.container.height() + 20)},
                500,
                function () {
                    self.close(); // or $.modal.close();
                }
            );
        }
    };

    OSX.init();

});​

L'unica cosa che ho fatto è eliminare la gestione del click sul bottone(commentando 2 righe)
qui ho preparato anche una demo. Se non vuoi usare la versione osx invece basta quanto detto prima