Vari problemi
4 partecipanti
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1 • Condividi
Vari problemi
Ciao a tutti,
io sulla mia pagina web ho creato questo slide: http://mydashboard.altervista.org/slide/demo.html
Il problema è che, tramite un frame vorrei portarlo sul mio forum senza bordo bianco e senza la scrollbar, cioè così:
Un'altra domanda, il codice dello slide è questo:
Io vorrei aumentare il tempo di traslazione tra un'immagine e un'altra, come si può fare?
Grazie mille :)
io sulla mia pagina web ho creato questo slide: http://mydashboard.altervista.org/slide/demo.html
Il problema è che, tramite un frame vorrei portarlo sul mio forum senza bordo bianco e senza la scrollbar, cioè così:
Un'altra domanda, il codice dello slide è questo:
- Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="gamesHolder">
<div id="games">
<a href="http://www.minininjas.com/" target="_blank">
<img src="games/mini_ninjas.jpg" alt="Mini Ninjas" />
<span>
<b>Mini Ninjas</b><br />
Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
furious Ninja skills to free your Ninja friends.
</span>
</a>
<a href="http://www.princeofpersiagame.com/" target="_blank">
<img src="games/prince_of_persia.jpg" alt="Price of Persia" />
<span><b> Leonardo</b><br />
</span>
</a>
<a href="http://spidermandimensions.marvel.com/" target="_blank">
<img src="games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
</a>
<a href="http://brinkthegame.com/" target="_blank">
<img src="games/brink.jpg" alt="Brink" />
</a>
<a href="http://www.godofwar.com/" target="_blank" >
<img src="games/god_of_war_3.jpg" alt="God of War III" />
</a>
<a href="http://www.borderlandsthegame.com/" target="_blank">
<img src="games/borderlands.jpg" alt="Borderlands" />
<span>
<b>Borderlands</b><br />
Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride.
</span>
</a>
<a href="http://www.swtor.com/" target="_blank">
<img src="games/star_wars_the_old_republic.jpg" alt="Star Wars: The Old Republic" />
</a>
<a href="http://www.batmanarkhamasylum.com/" target="_blank">
<img src="games/batman_arkham_asylum.jpg" alt="Batman: Arkham Asylum" />
</a>
</div>
</div>
<script>$(document).ready(function() {
$('#games').coinslider({ hoverPause: true });
});
</script>
Io vorrei aumentare il tempo di traslazione tra un'immagine e un'altra, come si può fare?
Grazie mille :)
Re: Vari problemi
Per il tempo prova a cambiare questo valore
Per l'iframe senza scrollbar fammi pensare un po su e poi ti rifaccio sapere
- Codice:
jquery-1.4.2.min.
Per l'iframe senza scrollbar fammi pensare un po su e poi ti rifaccio sapere
Dozy™- Veterano dello staff
- Sesso :
Età : 37
Messaggi : 2297
Località : Tradate (va)
Re: Vari problemi
trovi la risposta nella documentazione ufficiale del plugin..
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
comunque sostituisci
per portarlo sul tuo forum ti basta far caricare il plugin nel tuo forum con il relativo CSS, ovvero, dopo aver scritto l'HTML delle immagini, metti questo codice:
NB:- lo script non funziona se non implementi nella pagina le librerie jQuery, ma sono già incluse nel forum, quindi non ce ne è bisogno, ma se ce ne fosse bisogno, aggiungi prima dello script questo codice:
se hai bisogno di altro chiedi pure..
EDIT:- la soluzione dell'iframe è molto allettante, di conseguenza ti basta usare questo codice:
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
comunque sostituisci
- Codice:
<script>$(document).ready(function() {
$('#games').coinslider({ hoverPause: true });
});
</script>
- Codice:
<script>$(document).ready(function() {
$('#games').coinslider({ hoverPause: true, delay: 5000 });
});
</script>
per portarlo sul tuo forum ti basta far caricare il plugin nel tuo forum con il relativo CSS, ovvero, dopo aver scritto l'HTML delle immagini, metti questo codice:
- Codice:
<style type="text/css">
#page { width: 575px; margin: 30px auto; }
#gamesHolder { padding: 5px; margin-top: 30px; width: 565px; }
#header { text-align: center; }
#header h1 { color: #333333; font-size: 50px; }
#header h2 { color: #333333; font-size: 30px; }
a { text-decoration: none;}
.customFont {
font-family: 'Pompiere', Verdana, cursive;
font-size: 18px;
}
#header h1, #header h2 { margin: 0; padding: 0; font-weight: normal; }
ul { padding: 0 0 0 15px; margin: 0; }
.holder { padding: 17px 5px; border-radius: 5px; box-shadow: 0px 0px 3px #CCC; }
.text { background-color: #f3f3f3; padding: 20px; line-height: 20px; overflow: hidden; zoom: 1; }
.holder h2 { margin: 0; padding: 0px 0px 15px 0px; }
code { display: block; background-color: #fff; padding: 10px; overflow: auto; }
pre { margin: 10px 0px; padding: 0; }
.h2 {
font-weight: normal;
display: none;
}
.button a {
background: #0B5B60;
margin: 10px 100px;
opacity: 1;
outline: medium none;
padding: 5px ;
text-align: center;
text-decoration: none;
display: block;
line-height: 50px;
background: #599BDC;
background: -webkit-linear-gradient(top, #599BDC, #3072B3); /* webkit browsers */
background: -moz-linear-gradient(top, #599BDC, #3072B3); /* firefox 3.6+ */
background: -o-linear-gradient(top, #599BDC, #3072B3); /* opera */
background: -ms-linear-gradient(top, #599BDC, #3072B3); /* IE10 */
background: linear-gradient(top, #599BDC, #3072B3); /* css3 */
border: 1px solid #518CC6;
color: #FFFFFF;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.button a:hover {
background: #3072B3;
background: -webkit-linear-gradient(top, #3072B3, #599BDC); /* webkit browsers */
background: -moz-linear-gradient(top, #3072B3, #599BDC); /* firefox 3.6+ */
background: -o-linear-gradient(top, #3072B3, #599BDC); /* opera */
background: -ms-linear-gradient(top, #3072B3, #599BDC); /* IE10 */
background: linear-gradient(top, #3072B3, #599BDC); /* css3 */
box-shadow: 0 0 3px #518CC6;
}
.bar {
background-color: #111;
color: #f0f0f0;
box-shadow: 0px 0px 2px #333;
line-height: 25px;
padding: 0px 20px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10000;
}
.bar a {
color: #DDD;
}
.bar a:hover {
color: #FFFFFF;
}
#download {
clear: both;
}
#download .button {
font-size: 22px;
}
#features ul {
overflow: hidden;
zoom: 1;
margin: 15px;
}
#features li {
width: 50%;
float: left;
}
/** Coin Slider additional styles **/
.cs-buttons a {
border-radius: 50%;
background: #CCC;
background: -webkit-linear-gradient(top, #CCCCCC, #F3F3F3); /* webkit browsers */
background: -moz-linear-gradient(top, #CCCCCC, #F3F3F3); /* firefox 3.6+ */
background: -o-linear-gradient(top, #CCCCCC, #F3F3F3); /* opera */
background: -ms-linear-gradient(top, #CCCCCC, #F3F3F3); /* IE10 */
background: linear-gradient(top, #CCCCCC, #F3F3F3); /* css3 */
}
a.cs-active {
background: #599BDC;
background: -webkit-linear-gradient(top, #599BDC, #3072B3); /* webkit browsers */
background: -moz-linear-gradient(top, #599BDC, #3072B3); /* firefox 3.6+ */
background: -o-linear-gradient(top, #599BDC, #3072B3); /* opera */
background: -ms-linear-gradient(top, #599BDC, #3072B3); /* IE10 */
background: linear-gradient(top, #599BDC, #3072B3); /* css3 */
border-radius: 50%;
box-shadow: 0 0 3px #518CC6;
border: 1px solid #3072B3 !important;
}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
</style>
<script>
(function(jQuery){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;jQuery.fn.coinslider=jQuery.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=jQuery.extend({},jQuery.fn.coinslider.defaults,options);jQuery.each(jQuery('#'+el.id+' img'),function(i,item){images[el.id][i]=jQuery(item).attr('src');links[el.id][i]=jQuery(item).parent().is('a')?jQuery(item).parent().attr('href'):'';linksTarget[el.id][i]=jQuery(item).parent().is('a')?jQuery(item).parent().attr('target'):'';titles[el.id][i]=jQuery(item).next().is('span')?jQuery(item).next().html():'';jQuery(item).hide();jQuery(item).next().hide();});jQuery(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");jQuery('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");jQuery.setFields(el);if(params[el.id].navigation)
jQuery.setNavigation(el);jQuery.transition(el,0);jQuery.transitionCall(el);}
jQuery.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i<=params[el.id].sph;i++){gapx=tgapx;if(gapy>0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;}
for(j=1;j<=params[el.id].spw;j++){if(gapx>0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;}
order[el.id][counter]=i+''+j;counter++;if(params[el.id].links)
jQuery('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");else
jQuery('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");jQuery("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;}
sTop+=sHeight;sLeft=0;}
jQuery('.cs-'+el.id).mouseover(function(){jQuery('#cs-navigation-'+el.id).show();});jQuery('.cs-'+el.id).mouseout(function(){jQuery('#cs-navigation-'+el.id).hide();});jQuery('#cs-title-'+el.id).mouseover(function(){jQuery('#cs-navigation-'+el.id).show();});jQuery('#cs-title-'+el.id).mouseout(function(){jQuery('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){jQuery('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});jQuery('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});jQuery('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});jQuery('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};jQuery.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){jQuery.transition(el)},delay);}
jQuery.transition=function(el,direction){if(params[el.id].pause==true)return;jQuery.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){jQuery.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);jQuery(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined")
imagePos[el.id]++;else
if(direction=='prev')
imagePos[el.id]--;else
imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;}
if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;}
jQuery('.cs-button-'+el.id).removeClass('cs-active');jQuery('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){jQuery('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);jQuery('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{jQuery('#cs-title-'+el.id).css('opacity',0);}};jQuery.appereance=function(el,sid){jQuery('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;}
jQuery('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});jQuery('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};jQuery.setNavigation=function(el){jQuery(el).append("<div id='cs-navigation-"+el.id+"'></div>");jQuery('#cs-navigation-'+el.id).hide();jQuery('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");jQuery('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");jQuery('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();jQuery.transition(el,'prev');jQuery.transitionCall(el);}).mouseover(function(){jQuery('#cs-navigation-'+el.id).show()});jQuery('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();jQuery.transition(el);jQuery.transitionCall(el);}).mouseover(function(){jQuery('#cs-navigation-'+el.id).show()});jQuery("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo(jQuery('#coin-slider-'+el.id));for(k=1;k<images[el.id].length+1;k++){jQuery('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");}
jQuery.each(jQuery('.cs-button-'+el.id),function(i,item){jQuery(item).click(function(e){jQuery('.cs-button-'+el.id).removeClass('cs-active');jQuery(this).addClass('cs-active');e.preventDefault();jQuery.transition(el,i);jQuery.transitionCall(el);})});jQuery('#cs-navigation-'+el.id+' a').mouseout(function(){jQuery('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});jQuery("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});}
jQuery.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='')
eff=effA[Math.floor(Math.random()*(effA.length))];else
eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}
jQuery.random(order[el.id]);}
if(eff=='rain'){jQuery.rain(el);}
if(eff=='swirl')
jQuery.swirl(el);if(eff=='straight')
jQuery.straight(el);reverse[el.id]*=-1;if(reverse[el.id]>0){order[el.id].reverse();}}
jQuery.random=function(arr){var i=arr.length;if(i==0)return false;while(--i){var j=Math.floor(Math.random()*(i+1));var tempi=arr[i];var tempj=arr[j];arr[i]=tempj;arr[j]=tempi;}}
jQuery.swirl=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var x=1;var y=1;var going=0;var num=0;var c=0;var dowhile=true;while(dowhile){num=(going==0||going==2)?m:n;for(i=1;i<=num;i++){order[el.id][c]=x+''+y;c++;if(i!=num){switch(going){case 0:y++;break;case 1:x++;break;case 2:y--;break;case 3:x--;break;}}}
going=(going+1)%4;switch(going){case 0:m--;y++;break;case 1:n--;x++;break;case 2:m--;y--;break;case 3:n--;x--;break;}
check=jQuery.max(n,m)-jQuery.min(n,m);if(m<=check&&n<=check)
dowhile=false;}}
jQuery.rain=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var c=0;var to=to2=from=1;var dowhile=true;while(dowhile){for(i=from;i<=to;i++){order[el.id][c]=i+''+parseInt(to2-i+1);c++;}
to2++;if(to<n&&to2<m&&n<m){to++;}
if(to<n&&n>=m){to++;}
if(to2>m){from++;}
if(from>to)dowhile=false;}}
jQuery.straight=function(el){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}}
jQuery.min=function(n,m){if(n>m)return m;else return n;}
jQuery.max=function(n,m){if(n<m)return m;else return n;}
this.each(function(){init(this);});};jQuery.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery);
jQuery(document).ready(function() {
jQuery('#games').coinslider({ hoverPause: true, delay: 5000 });
});
</script>
NB:- lo script non funziona se non implementi nella pagina le librerie jQuery, ma sono già incluse nel forum, quindi non ce ne è bisogno, ma se ce ne fosse bisogno, aggiungi prima dello script questo codice:
- Codice:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
se hai bisogno di altro chiedi pure..
EDIT:- la soluzione dell'iframe è molto allettante, di conseguenza ti basta usare questo codice:
- Codice:
<iframe src="http://mydashboard.altervista.org/slide/demo.html" scrolling="no" frameborder="0" style="height: 200px; width: 300px;"></iframe>
Re: Vari problemi
Grazie mille, uno cosa però non ho capito.
Lo script che mi hai modificato lo devo mettere nel CSS del forum?
EDIT: tramite iFrame mi viene così:
Come posso togliere il bordo bianco sopra?
Lo script che mi hai modificato lo devo mettere nel CSS del forum?
EDIT: tramite iFrame mi viene così:
Come posso togliere il bordo bianco sopra?
Re: Vari problemi
o usi lo script che ti ho modificato (da mettere nel widget.. quello è un frullato inaudito di jquery, html e css.. se lo metti nel css ti va in pappa tutto.. ), o usi l'iframe.. dei due è meglio l'iframe..MaxPower97 ha scritto:Grazie mille, uno cosa però non ho capito.
Lo script che mi hai modificato lo devo mettere nel CSS del forum?
EDIT: tramite iFrame mi viene così:
Come posso togliere il bordo bianco sopra?
per il bordo bianco devi modificare il css che hai caricato su altervista, ma non verrà mai perfetto considerando che ogni browser fa come cavolo gli pare..
(ecco perchè gli iframe mi stanno altamente antipatici)
eppoi dai.. alla fine quel bordino bianco gli dona..
Argomenti simili
» PROBLEMI VARI
» cambio amministrazione forum
» Vari problemi con gli arrotondamenti!
» Vari problemi con il forum
» Problemi con templates vari
» cambio amministrazione forum
» Vari problemi con gli arrotondamenti!
» Vari problemi con il forum
» Problemi con templates vari
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.