Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Avere uno slider per le immagini (NivoSlider)

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial


Avere uno slider per le immagini (NivoSlider) Empty Avere uno slider per le immagini (NivoSlider)

Messaggio Da Ospite Lun 6 Feb 2012 - 20:56

Avere uno slider per le immagini (NivoSlider)


Ciao,

con questo tutorial potremo avere una Nivo Slider nei nostri forum.
Prima di tutto dobbiamo inserire nel nostro forum il codice scaricabile qui

Attenzione! tutte le immagini del CSS devono essere sostituite prima di inserirle nel forum. Le immagini inserite non possono essere utilizzate. Grazie

E' consigliabile inserirlo nei templates o nella descrizione del forum con questo codice:
Codice:
<script src="URLLINK" type="text/javascript"></script>

2. Andiamo su PDA > Visualizzazione > templates > generale> index_body (solo fondatore) ed aggiungiamo dove vogliamo (che venga visualizzato) questo codice:

Codice:
<div id="slider">
    <img src="slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="slide3.jpg" alt="" title="Esempio descrizione" />
    <img src="slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>Questo</strong> è un esempio di un <em>HTML</em> come <a href="#">link</a>.
</div>

e cambiate gli URL con i vostri... :good:
3. Ora inserire nel foglio CSS questo codice:
Codice:

#slider {
  position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/loadin10.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/bullet10.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/arrows10.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

4. Andiamo nuovamente su PDA > Visualizzazione > templates > generale> >overall_header
ed inseriamo questo script prima del tag /head
Codice:
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Tutoriale pubblicato da Niko
All rights reserved. This tutorial in not copyrighted by Forumattivo. Everyone (support forum includes) has to ask me before copying, editing or adapting it. Thanks for your support...
Copyrigth ©️ FORUMATTIVO.COM | ©️ FA-magazine

avatar
Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial

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