Author Topic:  [TUT]Cum se face un slider de imagini in jQuery si PHP.  (Read 1630 times)

0 Members and 1 Guest are viewing this topic.

Offline [SG]P1xuletz.xD

  • A D D I C T E D.
  • Legend
  • God
  • *
  • Posts: 7254
  • Reputation: 0
  • Gender: Male
  • Todos los Torros.
[TUT]Cum se face un slider de imagini in jQuery si PHP.
« on: 14 November 2014, 10:10:52 »
Probabil toata lumea ştie cum se realizează în jQuery un slider. E destul de simplu. Încărcăm fişierul jQuery în pagină şi plugin-ul jQuery pentru realizarea sliderului. Putem prezenta în slider nu numai imagini ci şi orice fel de conţinut de la texte la video. -


Quote
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/
« Last Edit: 22 November 2014, 18:15:06 by ×X×_vasya_×X× »





Offline ×X×_vasya_×X×

  • Legend
  • Cyborg
  • *
  • Posts: 10472
  • Reputation: 1
  • Gender: Male
  • Real Name: vasya
Re: Cum se face un slider de imagini in jQuery si PHP.
« Reply #1 on: 14 November 2014, 13:37:57 »
Interesant ,  acum folosesc multe persoane la ei pe site slidere .


"Nu e obligatoriu să fii de acord cu mine. Dar ar fi mai rapid aşa."




Offline IstuntmanI

  • GZS Owner
  • Administrator
  • Cyborg
  • *
  • Posts: 15119
  • Reputation: 80
  • Gender: Male
  • Real Name: NcF http://fb.me/cnistor96
  • Steam ID: istuntmani
Re: Cum se face un slider de imagini in jQuery si PHP.
« Reply #2 on: 14 November 2014, 14:43:59 »
Nu e foarte usor, dar nici greu nu e. :D

Offline AroWn.xD

  • Expert HTML & CSS
  • High-Roller
  • *
  • Posts: 4483
  • Reputation: 1
  • Gender: Male
  • Full stack Developer(Node.JS)
  • Real Name: Robert Silviu
  • Steam ID: AroWnD
Re: Cum se face un slider de imagini in jQuery si PHP.
« Reply #3 on: 15 November 2014, 23:52:02 »
Nu e mare lucru .. Daca nu ai ce face poti face repede asa ceva :)
Însă e bun"tutorialul" ..



Offline blacklife

  • Legend
  • High-Roller
  • *
  • Posts: 2912
  • Reputation: 7
  • Gender: Male
  • You know, i mean it
  • Real Name: Marius Nicolae
  • Steam ID: STEAM_0:0:67883302
Re: Cum se face un slider de imagini in jQuery si PHP.
« Reply #4 on: 16 November 2014, 00:14:33 »
Un tutorial bun ,eu nu stiam.


„Dacă n-ar exista fericirea altora, nu ne-am sinchisi de nefericirea noastră.”   — Marin Preda

Spoiler
Nu, nu mai joc SA-MP, nu mai scriptez, nu mai ofer suport pentru serverul Romania National Trucking cum de altfel nici nu mai sunt '' owner ''.
[close]

 

SimplePortal 2.3.7 © 2008-2024, SimplePortal