Slide show с аякс заявка

[vinsbg]

Здравейте,

не съм сигурен, че темата е за тук, но я пускам в този раздел заради Php&mysql часта.
Та имам в момента следното нещо:

   	$result = $pdo->prepare("SELECT * FROM images WHERE image_album = ? ORDER BY image_id ASC LIMIT 24");
        $result -> bindParam(1, $album_id, PDO::PARAM_INT);
   	$result->execute();
	echo '
	<div id="gallery" class="section-scroll main-section">
	   <section id="gallery-wrapper" class="">		
		<div class="gallery-content three-columns">';
		for($i=0; $row = $result->fetch(); $i++)
        	{
		    echo '            
		    	<a class="mix category-2 open-overlay" href="ajax-gallery.php" >
				<img width="1000" height="600" src="images/gallery/'.$row['image_name'].'" data-src="images/gallery/'.$row['image_name'].'"/>
					<div class="hidden-xs">
						<div>
							<span><h3>Отвори</h3></span>
						</div>
					</div>
			</a>';
	        }
      }

Моля някой да ми помогне сега как да направя в ajax-gallery.php файла, когато се натисне на някоя снимка 'Отвори' да отвори съответната снимка и да стане като слайд шоу да се разгледат останалите снимки от този албум.

Трябва php частта... за html-a и самия слайдер няма нужда.

.. или изобщо не съм на прав път?

 

[anonimen]

Сигурен ли си, че има нужда от ajax? Не можеш ли прост да напъхаш слайдшоуто в нещо с display:none? Ти така или иначе веднъж ги вадиш картинките от базата при зареждането, и искаш да го направиш втори път като се отвори слайдшоуто.

Доколкото разбирам в момента имаш грид с всички снимки, и искаш с натискане на картинка да се отвори слайдшоуто. Няма ли да е по-лесно с js да хванеш всички картинки и да ги копираш в eдин div.hidden, вместо да правиш http заявка.

 

[vinsbg]

Сигурен ли си, че има нужда от ajax? Не можеш ли прост да напъхаш слайдшоуто в нещо с display:none? Ти така или иначе веднъж ги вадиш картинките от базата при зареждането, и искаш да го направиш втори път като се отвори слайдшоуто.

Доколкото разбирам в момента имаш грид с всички снимки, и искаш с натискане на картинка да се отвори слайдшоуто. Няма ли да е по-лесно с js да хванеш всички картинки и да ги копираш в eдин div.hidden, вместо да правиш http заявка.

Честно казано може и да е по-лесно това, което казваш, но нямам представа как точно може да стане. Принципно имам тези двете:

1. показване на всички снимки:

$result = $pdo->prepare("SELECT * FROM images WHERE image_album = ? ORDER BY image_id ASC LIMIT 24");
$result -> bindParam(1, $album_id, PDO::PARAM_INT);
$result->execute();
echo '
   <div id="gallery" class="section-scroll main-section">
      <section id="gallery-wrapper" class="">       
         <div class="gallery-content three-columns">';
    for($i=0; $row = $result->fetch(); $i++)
    {
        echo '            
            <a class="mix category-2 open-overlay" href="ajax-gallery.php" >
            <img width="1000" height="600" src="images/gallery/'.$row['image_name'].'" data-src="images/gallery/'.$row['image_name'].'"/>
                <div class="hidden-xs">
                    <div>
                        <span><h3>Full size</h3></span>
                    </div>
                </div>
            </a>';
    }

2. това е за фул скрийн-а, когато се натисне на снимка: ajax-gallery.php

if(!empty($_POST["album_id"]) && !empty($_POST["image_id"])) {

$album_id = $_POST['album_id'];            
$image = $_POST['image_id'];

    $value = $pdo->prepare('SELECT * FROM images WHERE image_album = ? ORDER BY image_id = ? ASC');
    $value->bindParam(1, $album_id, PDO::PARAM_INT);
    $value->bindParam(2, $image_id, PDO::PARAM_INT);
    $value->execute();
    $result = $value->fetch();    

    foreach ($result as $row)
    {
        echo '
        <section id="gallery">
            <div class="gallery-content fullscreen"><a class="close-button"><i class="icon-close"></i></a>
                <div class="gallery">
                    <div class="loading-spinner"></div>
                    <div id="images" class="owl-carousel">
                        <div class="item"><figure><img src="images/gallery/'.$row['image_name'].'" /></figure></div>
                    </div>
                    <div class="controls"></div>
                </div>
            </div>
        </section>      
        ';
    }

 

[anonimen]

Сигурен ли си, че има нужда от ajax? Не можеш ли прост да напъхаш слайдшоуто в нещо с display:none? Ти така или иначе веднъж ги вадиш картинките от базата при зареждането, и искаш да го направиш втори път като се отвори слайдшоуто.

Доколкото разбирам в момента имаш грид с всички снимки, и искаш с натискане на картинка да се отвори слайдшоуто. Няма ли да е по-лесно с js да хванеш всички картинки и да ги копираш в eдин div.hidden, вместо да правиш http заявка.

Честно казано може и да е по-лесно това, което казваш, но нямам представа как точно може да стане. Принципно имам тези двете:

1. показване на всички снимки:

...

2. това е за фул скрийн-а, когато се натисне на снимка: ajax-gallery.php

...

Дефакто ти правиш едно и също нещо два пъти. Трябва да генерираш веднъж страницата, след което с jQuery много лесно ще извлечеш src-тата на картинките и ще създадеш галерията on the fly:

$pdo->execute...
foreach row...
<a class="mix ..."><img src="images/galerry/$row[image_name]" /></a>

[js]// за всяка картинка
$("a.mix.category-2.open-overlay > img").each(function(){

// добави елемент в слайдшоуто
// $(this) - това е картинката, на която сме в момента
$("това, което ти държи галерията").append("<div class=item><img src='"+$(this).data('src')+"'>");
});[/js]
Това разбира се е един много опростен модел на това, което искаш да постигнеш.

Плюсовете са, че пестиш bandwidth, заявки към сървъра, заявки към базата, галерията ще зарежда моментално; за минуси не се сещам.

 

[vinsbg]

В крайна сметка го направих с Magnific Popup плъгина. Бързо, лесно и удобно...

Не знам, защо се бях забатачил така

Благодаря.