Εφαρμογή ένος slideshow στη σελίδα

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από manolism » 08 Δεκ 2010 11:46

Έπειτα από αρκετό καιρό συνεχίζουμε τα μαθήματα που είχαμε αφήσει ΕΔΩ

Στο μάθημα αυτό θα τοποθετήσουμε το slideshow στην αντίστοιχη περιοχή που έχουμε ήδη δημιουργήσει. Το slideshow που επιλέχθηκε είναι το nivo-slider2.3 που θα βρείτε στη διεύθυνση http://nivo.dev7studios.com/. Έχουν γίνει όλες οι απαραίτητες ρυθμίσεις στο αρχείο style.css ώστε να εφαρμοστεί στο δικό μας template.

Πρώτα θα πρέπει να κατεβάσουμε τα αρχεία που χρειάζονται και να τα τοποθετήσουμε μέσα στο φάκελο του template μας.

slide.zip

Το αρχείο αυτό περιλαμβάνει τις εικόνες, τα αρχεία του jquery και τα αρχεία css. Αποσυμπιέστε το αρχείο και τοποθετήστε με την ίδια δομή μέσα στο φάκελο σας.

Στη συνέχεια μέσα στο αρχείο index.html και μέσα στην ετικέτα <head> βάλτε τις παρακάτω γραμμές κώδικα:

Κώδικας: Επιλογή όλων

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Στο κάτω μέρος της σελίδας και ακριβώς πάνω από την ετικέτα </body> εισάγετε τις παρακάτω γραμμές κώδικα:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $&#40;window&#41;.load&#40;function&#40;&#41; &#123;
        $&#40;'#slider'&#41;.nivoSlider&#40;&#41;;
    &#125;&#41;;
    </script>
Έπειτα μέσα στο αρχείο index.html και μέσα στο div slide θα εισάγουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="slider" class="nivoSlider">
<img src="images/newyork.jpg" title="New York | City Population&#58; 8.391.881" />
<img src="images/seattle.jpg" title="Seattle | City Population&#58; 617.334" />
<img src="images/francisco.jpg" title="San Francisco | City Population&#58; 815.358" />
<img src="images/miami.jpg" title="Miami | City Population&#58; 433.136" />
</div>
Ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
	<div id="header">
    	<div id="logo">Smashing DZine</div>
    	<div id="contact">
    	  <p><span class="btext">+971 55 7457383</span></p>
    	  <p>If you have any query, feel free to call us</p>
    	</div>
   <div class="corner">  	
<div id="navcontainer">
	<div id="smashnav">
	<ul>
	<li><a href="#" title="" class="current"><span>HOME</span></a></li>
	<li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li>
	<li><a href="#" title=""><span>OUR SERVICES</span></a></li>
	<li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li>
	<li><a href="#" title=""><span>BLOG</span></a></li>
    <li><a href="#" title=""><span>CONTACT US</span></a></li>

	</ul>
	</div>
</div>
</div>
	</div>
<div id="middle">
	<div id="middle_inside">
  <div id="slide">
              <div id="slider" class="nivoSlider">
                <img src="images/newyork.jpg" title="New York | City Population&#58; 8.391.881" />
                <img src="images/seattle.jpg" title="Seattle | City Population&#58; 617.334" />
                <img src="images/francisco.jpg" title="San Francisco | City Population&#58; 815.358" />
                <img src="images/miami.jpg" title="Miami | City Population&#58; 433.136" />
            </div>
  </div>
      <div id="quick_note">
      <h2>Quick Note</h2>
        <form action="vars.php" method="post">
  <label for="textinput">Your Full Name&#58;</label>
  <br />
	<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br />
	<label for="passwordinput">Email Address&#58;</label>
	<br />
	<input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br />
	<label for="textareainput">What Are You Looking For&#58;&#58;</label><br />
	<textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br />
	<br />
	<input type="submit" value="Submit" class="buttonSubmit" />
	<div id="stylesheetTest"></div>
</form>
      </div>
    </div>


</div>

<div id="boxes">

<div id="box_left">
  <p class="title"><span class="color">About</span> SmashingDzine</p>
  <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" />
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p>
  <p class="more"><a href="#">Read More</a></p>

</div>
<div id="box_middle">
  <p class="title"><span class="color">Our</span> Services</p>
  <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" />
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p>
  <p class="more"><a href="#">Read More</a></p>

</div>
<div id="box_right">
  <p class="title"><span class="color">Our</span> Portfolio</p>
  <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" />
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p>
  <p class="more"><a href="#">Read More</a></p>

</div>

 
<div id="box_down"></div>
</div>

</div>
<div id="footer_wrap">
<div id="footer">
<div id="footer_left">
  <p>Copyright © 2010 SmashingDzine  |  Privacy Policy</p>
  <p>Home  /  About SmashingDzine  /  Our Services  /  Portfolio  /  Blog  /  Contact Us</p>
</div>
<div id="footer_right">
        <form action="vars.php" method="post">
  <label for="textinput">Enter your email to subscribe for our RSS Updates&#58;</label>
  <br />
	<input type="text"  name="textinput"  maxlength="25" />
	
	<input type="submit" value="Submit"  />
</form>
</div>
</div>
</div>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $&#40;window&#41;.load&#40;function&#40;&#41; &#123;
        $&#40;'#slider'&#41;.nivoSlider&#40;&#41;;
    &#125;&#41;;
    </script>
</body>
LIVE DEMO

Οι ρυθμίσεις για το slideshow που μας ενδιαφέρουν είναι οι:

animSpeed:500 Καθορίζει την ταχύτητα της εναλλαγής της εικόνας
pauseTime:3000 Καθορίζει το χρόνο παραμονής της εικόνας

που βρίσκονται στο αρχείο jquery.nivo.slider.js

Εάν δε θέλετε να εμφανίζονται οι τίτλοι κάτω από τις εικόνες αφαιρέστε την ιδιότητα title από την εικόνα ώστε να γίνει σαν το παρακάτω.

Κώδικας: Επιλογή όλων

title=""
Καλή επιτυχία

Άβαταρ μέλους
$nikos$
Δημοσιεύσεις: 180
Εγγραφή: 10 Μάιος 2007 15:18
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από $nikos$ » 26 Ιαν 2011 14:55

Πολύ χρήσιμο ευχαριστώ...
Μήπως υπάρχει δυνατότητα να ανεβάζω τις φώτο που θέλω σε καποιον φάκελο και να τις διαβάζει από εκεί? (Χωρις δηλ. να τις δηλώνω μία-μία..) :question:

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από abeautifulmind » 02 Φεβ 2011 22:53

Πολύ καλό το slide ευχαριστώ

Άβαταρ μέλους
prl
Δημοσιεύσεις: 31
Εγγραφή: 20 Δεκ 2010 10:38

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από prl » 22 Νοέμ 2011 14:04

πολύ χρήσιμο thanks.. αλλά αλλάζω τον χρόνο παραμονής και τίποτα παραμένει ο ίδιος στο slide καμιά ιδέα ????

kwnos100
Δημοσιεύσεις: 7
Εγγραφή: 07 Δεκ 2011 23:42

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από kwnos100 » 24 Μαρ 2012 14:44

Ευχαριστώ πολύ καλό! :) ...
1 ερώτηση...
Πως μπορώ να το κάνω να δουλεύει σε Internet Explorer? :)

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Εφαρμογή ένος slideshow στη σελίδα

Δημοσίευση από neogeo21 » 15 Αύγ 2012 18:32

ναι φίλε μου αυτό με το χρόνο τι γίνετε αλλάζει πολύ γρήγορα και όσες αλλαγές να κάνεις στο αρχείο που λές παραμένει το ίδιο. μήπως κάτι άλλο πρέπει να κάνεις για να αλλάξουν οι χρόνοι

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης