Ajax слайдер (jQuery и PHP)

AJAX слайдер Если вам нужен простой скрипт для создания простого слайдера, причем изображения должны подгружаться из бд и без обновления страницы, то этот пример именно то, что вы искали. Наш слайдер будет работать на jQuery, AJAX и PHP.

demo

Следующий SQLкод создает таблицу pictures с тремя колонками (id, PictureTitle, PictureName) и заносит в таблицу информацию о некоторых фотографиях.

SQL

CREATE TABLE IF NOT EXISTS `pictures` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `PictureTitle` varchar(60) NOT NULL,
  `PictureName` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
INSERT INTO `pictures` (`id`, `PictureTitle`, `PictureName`) VALUES
(1, 'Benjamin Button', 'benjamin_button.jpg'),
(2, 'Liv Taylor', 'liv-taylor.jpg'),
(3, 'Macro Shot 1', 'pic1.jpg'),
(4, 'Macro Shot 2', 'pic2.jpg'),
(5, 'Sweets', 'mysweets.jpg');

index.php

Изначально мы подгрузим первое изображение, затем пользователь сможет 'перелистывать' изображения при помощи простой навигации, без обновления страницы. Файл полностью полагается на getpicture.php.

HTML, jQuery, PHP

<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$("body").on("click",".getPicButton", function(e){
    var myPictureId = $(this).attr('id');
    var getImgId =  myPictureId.split("-");
    getPicture(getImgId[1]);
    return false;
});
});

function getPicture(myPicId)
{
    // иконка загрузки
$('#picture').html('<div><img src="loader.gif" /></div>');

var myData = 'picID='+myPicId;
jQuery.ajax({
    url: "getpicture.php",
    type: "GET",
    dataType:'html',
    data:myData,
    success:function(response)
    {
        $('#picture').html(response);
    }
    });
}

</script>
<title>Ajax Pictures</title>
</head>

<body>
<div id="picture">

<?php
$getPicture = file_get_contents("http://localhost/pictures/getpicture.php");
echo $getPicture;
?>

</div>
</body>
</html>

getpicture.php

Файл получает id изображения от index.php, получает информацию об изображении из бд, генерирует кнопки вперед/назад и возвращает обратно в index.php информацию об изображении. Замените xxxxx на ваше MySQL имя, пароль, имя базы данных.

PHP

########## MySql #############
$username = "xxxx"; //mysql имя
$password = "xxxx"; //mysql пароль
$hostname = "localhost"; //хост
$databasename = 'xxxx'; //имя БД

if(isset($_GET["picID"]) && is_numeric($_GET["picID"]))
{
    $curPicId = $_GET["picID"];
}else{
    $curPicId =1;
}

//Соединение с БД
$connecDB = mysql_connect($hostname, $username, $password)or die();
mysql_select_db($databasename,$connecDB);

//Получаем текущее изображение
$Result = mysql_query("SELECT PictureTitle,PictureName FROM pictures WHERE id=$curPicId");
$row = mysql_fetch_row($Result);
if(!empty($row))
{
    //на всякий случай
    $picTitle=''; $picName=''; $PrvLink='';$NextLink='';

    $picTitle = $row[0];
    $picName = $row[1];

    //Получаем предыдущее изображение
    //DESC – по убыванию
    $PrvResult = mysql_query("SELECT id,PictureTitle FROM pictures WHERE id<$curPicId ORDER BY id DESC");
    $PrvPic = mysql_fetch_row($PrvResult);
    if($PrvPic)
    {
        $PrvLink = '<a href="#" id="getPic-'.$PrvPic[0].'" title="'.$PrvPic[1].'"
        class="getPicButton"><img src="prev.png" border="0" /></a>';
    }

    //Получаем следующее изображение
    $NxtResult = mysql_query("SELECT id,PictureTitle FROM pictures WHERE id>$curPicId ORDER BY id ASC");
    $NxtPic = mysql_fetch_row($NxtResult);
    if($NxtPic)
    {
        $NextLink = '<a href="#" id="getPic-'.$NxtPic[0].'" title="'.$NxtPic[1].'"
        class="getPicButton"><img src="next.png" border="0" /></a>';
    }

    echo '<table width="500" border="0" cellpadding="5" cellspacing="0">
          <tr>
            <td><table width="100%" border="0" cellpadding="5" cellspacing="0">
              <tr>
                <td width="10%">'.$PrvLink.'</td>
                <td width="80%" align="center"><h3>'.$picTitle.'</h3></td>
                <td width="10%">'.$NextLink.'</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="center"><img src="pictures/'.$picName.'" /></td>
          </tr>
        </table>';

    //json data
    //echo json_encode($picdata);

}
//Закрываем соединение с БД
mysql_close($connecDB);

demo

Источник

Ajax слайдер (jQuery и PHP)

index.php

getpicture.php

Комментарии к статье