Hi, Guest
0 Members and 1 Guest are viewing this topic.
COD: <?php include('includes/functions.inc.php'); ?> <!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"> <head> <title>Cum fac un slider de imagini in jQuery si PHP?</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Cum fac un slider de imagini in jQuery si PHP?" /> <meta name="keywords" content="Cum fac un slider de imagini in jQuery si PHP?" /> <meta name="abstract" content="Cum fac un slider de imagini in jQuery si PHP?" /> <meta name="author" content="AccesInterzis" /> <meta name="copyright" content="AccesInterzis" /> <meta name="robots" content="noindex,nofollow" /> <meta name="revisit-after" content="7 days" /> <script type="text/javascript" src="js/jquery1.4.2.js"></script> <!--**********Begin - jQuery slider**********--> <script type="text/javascript" src="js/easy-slider1.5.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script> <!--**********End - jQuery slider**********--> <style type="text/css"> * { margin:0; padding:0; outline:none; } html { color:black; background-color:white; font: normal normal normal 12px Verdana; /*font-style font-variant font-weight font-size font-family*/ } /***********Begin - jquery slider***********/ div#container { position:relative; width:605px; margin:0 auto; } div#container div#slider ul { list-style:none; } div#container div#slider li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:605px; height:270px; overflow:hidden; } div#container #prevBtn, div#container #nextBtn { display:block; width:13px; height:20px; position:absolute; top:275px; } div#container #prevBtn { left:0px; } div#container #nextBtn { left:587px; } div#container #prevBtn a, div#container #nextBtn a { display:block; width:13px; height:20px; } div#container #prevBtn a { background:url(images/prev-btn.png) no-repeat 0 0; } div#container #nextBtn a { background:url(images/next-btn.png) no-repeat 0 0; } div#container .graphic, div#container #prevBtn, div#container #nextBtn { display:block; overflow:hidden; text-indent:-8000px; } /***********End - jquery slider***********/ </style> </head> <body> <div id="container"> <div id="slider"> <ul> <?php $slides = read_images('images/slides', array('.jpg', '.jpeg'), 600, 600, 270, 270); foreach ($slides as $slide) { echo '<li>'; echo '<img src="images/slides/'.$slide.'" alt="" />'; echo '</li>'."\r\n"; } ?> <li style="text-align:center; font-size:24px; color:#c00; padding-top:50px;"> In slider putem sa punem orice fel de continut dorim: imagini, text, video. Acest continut poate fi citit dintr-o baza de date.</li> </ul> </div> </div> </body> </html> Cu ajutorul funcţiei PHP read_images() citesc dinamic thumbnail-urile de pe server.Sliderul poate fi folosit la fel de bine şi ca secţiune de ştiri în care se încarcă dintr-o bază de date ultimele ştiri.Articol preluat de la : http://www.tutorialeonline.net/ro/