Nuove tecniche per foto e spigoli di pagine

[WebbyMasters]

Ciao a tutti,
vorrei usare nel mio sito quel nuovo modo che ho visto di aprire le foto che crea, cliccando sulla foto in miniatura, uno sfondo nero stesso nella pagina web in cui siamo e poi al centro apre una finestra in cui c'è la foto stesso su questo sfondo nero semi-trasparente.
E poi ho visto di recente che in alcuni siti web c'è l'angolo in alto a destra della pagina che si è trasformato in una specie di linguetta di foglio di giornale che si muove e che contiene un'immagine sotto e se gli si passa il mouse sopra si "srotola" verso l'interno della pagina mostrando il resto del contenuto creando un effetto ottico come se la nostra pagina attuale fosse una pagina di giornale e quindi "sotto" ce ne fosse un'altra.
Sapreste dirmi come fare? Come si chiamano queste tecniche?

Grazie
Ciao

 

[gianni21031]

ciao. solitamente l'effetto delle foto si realizza con un sito creato con wordpress, attraverso dei semplici plugin (il cui processo di installazione deve però essere accurato, altrimenti non funzionano bene).
per l'effetto lightbox alle immagini, se utilizzi wordpress, puoi installare questo plugin http://www.4mj.it/lightbox-js-v20-wordpress/
si preferisce integrarlo in wordpress perchè il processo di installazione è molto semplice e automatico.. segui questa guida (http://www.idratherbewriting.com/2008/07/10/wordpress-image-gallery-example/) se vuoi aggiungere delle ottime gallery fotografiche.
ho visto che esistono degli script che permetterebbero di fare la stessa cosa con qualsiasi sito, ma purtroppo sono a pagamento.
per quanto riguarda le fasce laterali (ribbon), puoi crearle tu con un qualsiasi software di grafica o attraverso questo sito http://quickribbon.com/ e poi integrarle sul tuo portale seguendo questa guida: http://www.undolog.com/2008/12/02/how-i-did-it-come-creare-uno-sticker-ribbon-in-3-passi/

 

[msm4rvn]

Quindi (io sono ignorante in media... mi fermo all'era dell'editor HTML e della suite macromedia), devo prima realizzarmi il sito con il CMS e poi scaricarmi tremila programmi? :crying:
Forte!:beer:

 

[gianni21031]

quello delle immagini in lightbox è uno script in php. installarlo senza che ci sia un processo automatico è abbastanza difficile (già è difficile con il plugin per wordpress) e tra l'altro sembra che tutti gli script di questo tipo non siano gratis (il plugin per wordpress lo è).. infatti se ci fate caso la quasi totalità dei siti che lo utilizzano sono realizzati con cms..
l'altro invece si può realizzare su qualunque sito.. basta avere delle semplici conoscenze di html e saper orientarsi dentro i fogli di stile :fonzie:

 

[WpStyle]

per la galleria fotografica con effetto lightbox prova questo script php
http://www.area82.it/script/phpneogallery
per l'effetto peel puoi trovare degli script in rete facendo una breve ricerca con google

 

[WebbyMasters]

grazie ragazzi, ho trovato tutto quello che mi serviva ma ho un piccolo problemino per quanto riguarda il "PagePeel":
premetto che il PagePeel è un file in JavaScript che interagisce con altri 2 file in Flash (.swf) e 2 immagini (ogniuna per ogni stato della "linguetta" della pagina, a riposo e spiegta) richiamati dal file in .js stesso.
Detto questo il mio problema è che nella pagina in cui è c'è l'effetto PagePeel ci sono anche altri filmati Flash e quando "srotolo" la linguetta la parte di pagina srotolata passa inevitabilmente al di sotto di questi filmati facendo risultare, come potete ben immaginare, l'effetto di poco gradimento. Ho anche provato a mettere la stringa che richiama lo script PagePeel in un livello (in pratica l'unico), dando come ordine z="1" quindi al di sopra di tutto nella pagina, ma il risultato non cambia.

Questo è il codice del file in JS (non fate caso alle faccine):

// ONLY EDIT THE SELECTIONS WITH A "//" NOTE AFTER IT

var pagepeel = new Object();

pagepeel.ad_url = escape('http://www.google.it'); // Link Address when ad is clicked on
pagepeel.small_path = './pagepeel/small.swf'; // Path where you placed the small.swf
pagepeel.small_image = escape('./pagepeel/images/piccolo.jpg'); // Small Image before hover (.jpg, .gif, .png, .swf) - 75X75
pagepeel.small_width = '100';
pagepeel.small_height = '100';
pagepeel.small_params = 'ico=' + pagepeel.small_image;

pagepeel.big_path = './pagepeel/big.swf'; // Path where you placed the big.swf
pagepeel.big_image = escape('./pagepeel/images/offerte.jpg'); // Large Image after hover (.jpg, .gif, .png, .swf) - 500X500
pagepeel.big_width = '650';
pagepeel.big_height = '650';
pagepeel.big_params = 'big=' + pagepeel.big_image + '&ad_url=' + pagepeel.ad_url;

function sizeup987(){
document.getElementById('PagePeelBig').style.top = '0px';
document.getElementById('PagePeelSmall').style.top = '-1000px';
}

function sizedown987(){
document.getElementById("PagePeelSmall").style.top = "0px";
document.getElementById("PagePeelBig").style.top = "-1000px";
}

pagepeel.putObjects = function () {
// <PagePeelSmall>
document.write('<div id="PagePeelSmall" style="position:absolute;width:'+ pagepeel.small_width +'px;height:'+ pagepeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="PagePeelSmallObject" width="'+pagepeel.small_width+'" height="'+pagepeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ pagepeel.small_path +'?'+ pagepeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+pagepeel.small_params+'"/>');
// embed
document.write('<embed src="'+ pagepeel.small_path + '?' + pagepeel.small_params +'" name="PagePeelSmallObject" wmode="transparent" quality="high" width="'+ pagepeel.small_width +'" height="'+ pagepeel.small_height +'" flashvars="'+ pagepeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </PagePeelSmall>
// <PagePeelBig>
document.write('<div id="PagePeelBig" style="position:absolute;width:'+ pagepeel.big_width +'px;height:'+ pagepeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="PagePeelBigObject" width="'+ pagepeel.big_width +'" height="'+ pagepeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ pagepeel.big_path +'?'+ pagepeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ pagepeel.big_params +'"/>');
// embed
document.write('<embed src="'+ pagepeel.big_path + '?' + pagepeel.big_params +'" id="PagePeelBigEmbed" name="PagePeelBigObject" wmode="transparent" quality="high" width="'+ pagepeel.big_width +'" height="'+ pagepeel.big_height +'" flashvars="'+ pagepeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </PagePeelBig>
setTimeout('document.getElementById("PagePeelBig").style.top = "-1000px";',1000);
}
pagepeel.putObjects();

Come posso risolvere secondo voi?

grazie
ciao