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

Anastasis · November 10, 2016

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

slide.zip

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

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

κώδικας:

Στο κάτω μέρος της σελίδας και ακριβώς πάνω από την ετικέτα </body> εισάγετε τις παρακάτω γραμμές κώδικα:

κώδικας:

Έπειτα μέσα στο αρχείο index.html και μέσα στο div slide θα εισάγουμε το παρακάτω:

κώδικας:

Ολόκληρος ο κώδικας της σελίδας μέσα στο <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: 8.391.881" />
<img src="images/seattle.jpg" title="Seattle | City Population: 617.334" />
<img src="images/francisco.jpg" title="San Francisco | City Population: 815.358" />
<img src="images/miami.jpg" title="Miami | City Population: 433.136" />
</div>
</div>
<div id="quick_note">
<h2>Quick Note</h2>
<form action="vars.php" method="post">
<label for="textinput">Your Full Name:</label>
<br />
<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br />
<label for="passwordinput">Email Address:</label>
<br />
<input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br />
<label for="textareainput">What Are You Looking For::</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:</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">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>

LIVE DEMO

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

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

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

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

κώδικας:

title=""

Καλή επιτυχία

Sign In

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

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity