Ciao a tutti,
sto inserendo uno slideshow jQuery in una pagina html.
Lo slideshow, per ogni immagine, presenta un bottoncino "i" in alto a sinistra, cliccando il quale si apre una mini-finestra con le informazioni (campo alt del tag img) sull'immagine stessa.
In ogni momento, poi, è possibile chiudere la finestra con la x in alto a destra della finestra stessa.
Vorrei invece che, inizialmente (ossia al caricamento della pagina html), la finestra informazioni fosse GIA' attiva, e l'utente potesse poi chiuderla quando gli pare (e riaprirla cliccando sul bottincino "i" di cui sopra).
Il codice javascript per il comportamento dello slideshow (in cui è incluso quello della finestra informazioni) è il seguente:
Mentre il CSS per formattare lo slideshow è il seguente:codice:/* Galleria Classic Theme 2011-08-01 http://galleria.aino.se Copyright (c) 2011, Aino Licensed under the MIT license. */ Galleria.requires(1.25,"This version of Classic theme requires Galleria 1.2.5 or later"); ( function(b) { Galleria.addTheme({ name:"classic", author:"Galleria", css:"galleria.classic.css", defaults:{ transition:"slide", thumbCrop:"height", _toggleInfo:!0}, init:function(e){ this.addElement("info-link","info-close"); this.append({info:["info-link","info-close"]}); var c = this.$("info-link,info-close,info-text"), d = Galleria.TOUCH, f = d?"touchstart":"click"; this.$("loader,counter").show().css("opacity",0.4); d||(this.addIdleState(this.get("image-nav-left"), {left:-50}), this.addIdleState(this.get("image-nav-right"), {right:-50}), this.addIdleState(this.get("counter"), {opacity:0})); e._toggleInfo===!0?c.bind(f,function(){c.toggle()}):(c.show(),this.$("info-link, info-close").hide()); this.bind("thumbnail",function(a){ d?b(a.thumbTarget).css( "opacity", this.getIndex()?1:0.6):(b(a.thumbTarget).css("opacity",0.6).parent().hover(function(){b(this).not(".active").children().stop().fadeTo(100,1)},function(){b(this).not(".active").children().stop().fadeTo(400,0.6)}),a.index===this.getIndex()&&b(a.thumbTarget).css("opacity", 1))});this.bind("loadstart",function(a){a.cached||this.$("loader").show().fadeTo(200,0.4);this.$("info").toggle(this.hasInfo());b(a.thumbTarget).css("opacity",1).parent().siblings().children().css("opacity",0.6)});this.bind("loadfinish",function(){this.$("loader").fadeOut(200)})}})})(jQuery);
codice:.galleria-container { position: relative; overflow: hidden; background: #000; } .galleria-container img { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; } .galleria-stage { position: absolute; top: 10px; bottom: 60px; left: 10px; right: 10px; overflow:hidden; } .galleria-thumbnails-container { height: 50px; bottom: 0; position: absolute; left: 10px; right: 10px; z-index: 2; } .galleria-carousel .galleria-thumbnails-list { margin-left: 30px; margin-right: 30px; } .galleria-thumbnails .galleria-image { height: 40px; width: 60px; background: #000; margin: 0 5px 0 0; border: 1px solid #000; float: left; cursor: pointer; } .galleria-counter { position: absolute; bottom: 10px; left: 10px; text-align: right; color: #fff; font: bold 12px/1 arial,sans-serif; z-index: 1; } .galleria-loader { background: #000; width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; z-index: 2; display: none; background: url(classic-loader.gif) no-repeat 2px 2px; } /* Formattazione del box descrizione (container): */ .galleria-info { width: 50%; top: 15px; left: 15px; z-index: 2; position: absolute; } .galleria-info-text { background-color: #000; padding: 12px; display: none; /* IE7 */ zoom:1; } /* Formattazione del titolo della descrizione: */ .galleria-info-title { font: bold 14px/1.1 arial,sans-serif; margin: 0; color: #fff; margin-bottom: 7px; } /* Formattazione della descrizione: */ .galleria-info-description { font: italic 12px/1.4 georgia,serif; margin: 0; color: #bbb; } .galleria-info-close { width: 9px; height: 9px; position: absolute; top: 5px; right: 5px; background-position: -753px -11px; opacity: .5; filter: alpha(opacity=50); cursor: pointer; display: none; } .notouch .galleria-info-close:hover{ opacity:1; filter: alpha(opacity=100); } .touch .galleria-info-close:active{ opacity:1; filter: alpha(opacity=100); } .galleria-info-link { background-position: -669px -5px; opacity: .7; filter: alpha(opacity=70); position: absolute; width: 20px; height: 20px; cursor: pointer; background-color: #000; } .notouch .galleria-info-link:hover { opacity: 1; filter: alpha(opacity=100); } .touch .galleria-info-link:active { opacity: 1; filter: alpha(opacity=100); } .galleria-image-nav { position: absolute; top: 50%; margin-top: -62px; width: 100%; height: 62px; left: 0; } .galleria-image-nav-left, .galleria-image-nav-right { opacity: .3; filter: alpha(opacity=30); cursor: pointer; width: 62px; height: 124px; position: absolute; left: 10px; z-index: 2; background-position: 0 46px; } .galleria-image-nav-right { left: auto; right: 10px; background-position: -254px 46px; z-index: 2; } .notouch .galleria-image-nav-left:hover, .notouch .galleria-image-nav-right:hover { opacity: 1; filter: alpha(opacity=100); } .touch .galleria-image-nav-left:active, .touch .galleria-image-nav-right:active { opacity: 1; filter: alpha(opacity=100); } .galleria-thumb-nav-left, .galleria-thumb-nav-right { cursor: pointer; display: none; background-position: -495px 5px; position: absolute; left: 0; top: 0; height: 40px; width: 23px; z-index: 3; opacity: .8; filter: alpha(opacity=80); } .galleria-thumb-nav-right { background-position: -578px 5px; border-right: none; right: 0; left: auto; } .galleria-thumbnails-container .disabled { opacity: .2; filter: alpha(opacity=20); cursor: default; } .notouch .galleria-thumb-nav-left:hover, .notouch .galleria-thumb-nav-right:hover { opacity: 1; filter: alpha(opacity=100); background-color: #111; } .touch .galleria-thumb-nav-left:active, .touch .galleria-thumb-nav-right:active { opacity: 1; filter: alpha(opacity=100); background-color: #111; } .notouch .galleria-thumbnails-container .disabled:hover { opacity: .2; filter: alpha(opacity=20); background-color: transparent; } .galleria-carousel .galleria-thumb-nav-left, .galleria-carousel .galleria-thumb-nav-right { display: block; } .galleria-thumb-nav-left, .galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, .galleria-image-nav-left, .galleria-image-nav-right { background-image: url(classic-map.png); background-repeat: no-repeat; }
Dove ho precisato tramite commenti la parte che formatta il box informazioni.
In allegato un'immagine di come attualmente si presenta, al caricamento di pagina, la galleria.
Ho postato perché magari è una cavolata, ma non sono ferratissimo in Javascript.
Grazie a tutti,
SOTL
Rispondi quotando