Создание просмотра альбома, как Facebook - PullRequest
Новая
       2

Создание просмотра альбома, как Facebook

0 голосов
/ 16 января 2011

Я работаю над созданием программы для просмотра альбомов, такой как Facebook.

Я выполнил "настройку", вы можете увидеть фотографию, в каком альбоме она находится и так, теперь я хотел бы сделать "кнопки "next" "previous" работают.

Я видел, как они использовали предварительную загрузку при просмотре тока, и я хочу сделать что-то подобное.

Но прежде всего, как я могу сделать"следующий"?Как сделать так, чтобы «следующая» работала.

Имея это в виду, я имею в виду, как мне ее кодировать, чтобы она знала, какая картинка следующая?Я хотел бы отсортировать его по дате (упорядочить по дате), поэтому следующая должна быть новее текущей даты, а предыдущая старше текущей даты.

Моя база данных выглядит следующим образом: 

album
id uID title

album_photos
id aID uID photo date

aID содержит идентификатор альбома (идентификатор альбома), uID - идентификатор пользователя (userID).

Я также хочу использовать javascript.Сделайте ajax-запрос вместо обновления всей страницы.

Итак, мой вопрос:

Какова процедура создания кнопки next / prev, если я хочу, чтобы она работала после даты DESCКак выглядит JavaScript?Ajax-запрос к file.php, который извлекает последнее изображение из базы данных, а затем в случае успеха заменяет текущую фотографию и показывает ее?Что касается адресной строки, в фейсбуке адресная строка меняется в соответствии с загрузкой новой фотографии.

Любой хорошо объясненный ответ для процедуры создания этого, примет ответ

Ответы [ 2 ]

1 голос
/ 16 января 2011

Здесь будут загружаться изображения из базы данных с использованием ajax (следующий / предыдущий).Также включает в себя руководства и прелоадер (размещен здесь http://www.preloaders.net/). Дайте мне знать, если у вас есть какие-либо вопросы.

Вот, пожалуйста. Это 3 файла

  1. index.php... показать страницу
  2. ajax.php ... читать базу данных для изображений
  3. show.php ... загружает изображения

просто не забудьтеустановить хост, пользователя, пароль и имя базы данных в ajax.php

скопируйте и вставьте это: 1.index.php 

<?php
include("ajax.php");
?>



<script type="text/javascript" src="JQUERY/jquery.js"></script>
<script>
var ID = "<?php echo $id; ?>";
var inc = ID + 1;
var dec = ID;
var totalpages = "<?php echo $totalpages + 1; ?>";

$(function(){   
    $('.loader').hide();

    <!-- np = next & prev button functions -->
    $('.np').click(function() {

        if($(this).attr('id') == "next") {

            $(this).attr('push', inc++);
            if($(this).attr('push')<totalpages) {               
                $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false });   
                $('.loader').show();            
                dec = inc - 2;
                $('#images').hide();
            }
        }


        else if($(this).attr('id') == "prev") {

            $(this).attr('push', dec--);        
            if($(this).attr('push')>-1) {

                $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false });   
                $('.loader').show();
                inc = dec + 2;
                $('#images').hide();
            }
        }



    });
});

<!-- this function is called after ajax send its request -->
function AjaxFunc(return_value) {
    $('#images').html(return_value);
    $('.loader').hide();
    $('#images').show();
}

</script>

<div id="images">

    <!-- loads default numbers of images. whats inside here will change once you click next or prev -->
    <?php
        for($i=$id * $limit; $i<$limit + $id * $limit; $i++) {
            echo $imagearray[$i]."<br/>";
        }
    ?>
</div>


<!-- next & previous buttons -->
<a class="np" id="prev" push="<?php echo $id; ?>" href="#">Prev</a>
<a class="np" id="next" push="<?php echo $id + 1; ?>" href="#">Next</a>


<!-- preloader. hidden on start. will show while images load -->
<img class="loader" src="http://www.preloaders.net/generator.php?image=75&speed=5&fore_color=000000&back_color=FFFFFF&size=64x64&transparency=0&reverse=0&orig_colors=0&uncacher=26.066433149389923"/>

2.ajax.php 

<?php

//id is tjhe page number. it is 0 by default. while clicking next/prev, this will not change. set it like this: file?id=0
$id = $_GET['id'];

//connect to the databsae
$host="localhost";
$user = "username";
$password = "";
$database = "database_name";
$connect = mysql_connect($host, $user, $password) or die("MySQL Connection Failed");
mysql_select_db($database) or die ("Database Connection Fail");

//set your the limit of images to be displayed
$limit = 5;

//push images into array
$q = mysql_query("SELECT * FROM image_table");
$num = mysql_num_rows($q);
while($r = mysql_fetch_array($q)) {
    $imagearray[] = "<img src='"
                    .$r['IMAGE_URL']
                    ."'/>";
}

//will determine total number of pages based on the limit you set
$totalpages = ceil($num/$limit) - 1;
?>

3.show.php 

<?php
include("ajax.php");
for($i=$id * $limit; $i<$limit + $id * $limit; $i++) {
    echo $imagearray[$i]."<br/>";
}
?>
0 голосов
/ 16 января 2011

Если вы сортируете свои фотографии по дате DESC, и у вас есть текущая дата фотографий, сделайте следующее:

  • Чтобы найти следующую фотографию: Закажите ваши фотографии по дате DESC и выберите первую фотографию, чейдата меньше даты текущей фотографии.Получите только первое.
  • Чтобы найти предыдущее фото: Закажите ваши фотографии по дате ASC и выберите первое фото, дата которого больше, чем дата текущей фотографии.Получите только первое.

Создайте для этого SQL-операторы самостоятельно.

...