Vari problemi


Vari problemi

Messaggio Da MaxPower97 il Gio 1 Mar 2012 - 15:42

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:
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 :)
avatar
MaxPower97
***

Sesso : Maschile
Età : 26
Messaggi : 120
Località : Padova


http://passioneconsole.forumattivo.it
MaxPower97 è stato ringraziato dall'autore di questo topic.

Re: Vari problemi

Messaggio Da Dozy™ il Gio 1 Mar 2012 - 18:12

Per il tempo prova a cambiare questo valore

Codice:
jquery-1.4.2.min.

Per l'iframe senza scrollbar fammi pensare un po su e poi ti rifaccio sapere
avatar
Dozy™
Veterano dello staff
Veterano dello staff

Sesso : Maschile
Età : 30
Messaggi : 2297
Località : Tradate (va)


Dozy™ è stato ringraziato dall'autore di questo topic.

Re: Vari problemi

Messaggio Da Diego il Gio 1 Mar 2012 - 22:40

trovi la risposta nella documentazione ufficiale del plugin..
http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/

comunque sostituisci
Codice:
<script>$(document).ready(function() {
  $('#games').coinslider({ hoverPause: true });
});
</script>
con
Codice:
<script>$(document).ready(function() {
  $('#games').coinslider({ hoverPause: true, delay: 5000  });
});
</script>
di cui il 5000 sono i millisecondi che devono trascorrere fra un'immagine e l'altra.. Wink

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>
PS:- ho modificato un po lo script, così sarà compatibile con il tuo forum.. Surprised
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.. happy

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> 
avatar
Diego
Veterano dello staff
Veterano dello staff

Sesso : Maschile
Età : 26
Messaggi : 2249
Località : arezzo


http://www.folliacity.it/blog-1.html
Diego è stato ringraziato dall'autore di questo topic.

Re: Vari problemi

Messaggio Da MaxPower97 il Ven 2 Mar 2012 - 21:14

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?
avatar
MaxPower97
***

Sesso : Maschile
Età : 26
Messaggi : 120
Località : Padova


http://passioneconsole.forumattivo.it
MaxPower97 è stato ringraziato dall'autore di questo topic.

Re: Vari problemi

Messaggio Da Diego il Sab 3 Mar 2012 - 1:40

@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?
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.. Laughing ), o usi l'iframe.. dei due è meglio l'iframe.. Surprised

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.. Surprised
(ecco perchè gli iframe mi stanno altamente antipatici)

eppoi dai.. alla fine quel bordino bianco gli dona.. Basketball
avatar
Diego
Veterano dello staff
Veterano dello staff

Sesso : Maschile
Età : 26
Messaggi : 2249
Località : arezzo


http://www.folliacity.it/blog-1.html
Diego è stato ringraziato dall'autore di questo topic.

Re: Vari problemi

Messaggio Da VIRTUALDEEJAY il Lun 16 Apr 2012 - 23:49

Chiudo per eccessiva inattività dell'argomento.


avatar
VIRTUALDEEJAY
Aiutattivo
Aiutattivo

Sesso : Maschile
Età : 46
Messaggi : 4014
Località : Parma (PR)


http://www.virtualdeejay.net
VIRTUALDEEJAY è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum