Jquery/Ajax

swlight

Registered
Здравейте.Тъй като не съм добър с Jquery/Ajax реших да попитам едно нещо как ще стане.
Значи имам 9 малки снимки,подредени с колона по 3 и до тях има един голям бокс.Въпроса ми е как да се направи с Jquery/Ajax като се натисне на дадена картинка в този голям бокс,който е до тях да се показва информация за тази снимка динамично.И като се натисне да друга,да се покаже пък за другата.Как може да стане такова нещо ?

+ инфото ще се взима от дб с PHP и Ajax.
 
Ще ти дам прост пример как да го направиш. Правиш си два файла, единият например index.php където, слагаш снимките и един <div> който, ще визуализира отговора от аякса. Вторият файл например ajax.php ще съдържа функцията с отговора на визуализацията.

index.php пример + javascript

Код:
<a id="image_1" href="">Снимка</a><br/>
<div id="answer_1"></div>

var image_1 = document.getElementById("image_1");
var answer_1 = document.getElementById("answer_1");
            
            image_1.onclick = function() {
                
                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: {func_1: "yes"},
                    success: function(html){
                        $( "#answer_1" ).append( html );
                    }
                });                      
                return false;
    
            };


ajax.php пример

Код:
$func_1 = $_POST['func_1'];
if ($func_1 == "yes") {
    echo '<div>Тук се пише текста който, ще се визуализира или се вади от базата данни. 
          </div>';
}
 
Благодаря за отговора,но това не ме устройва.Този вариант го знам и като с този метод

var image_1 = document.getElementById("image_1");
var answer_1 = document.getElementById("answer_1");

трябва така да направя за всички снимки...не става.

Мисля,че имаше нещо и се използваше this за да се вземе точно на картинката,на която си кликнал без да се правят такива неща.
 
Значи картинките са ти
class="image" id="тук задаваш някакво ид, по което в php ще връщаш инфо-то"
, a бокса ти е
id="img_info"
.
jQuery-то е следното:

[js]var info_box = $('#box');
$('.image').click(function(){
var id = $(this).attr('id');
info_box.load("file.php?id=" + id);
})[/js]
Това е един доста лесен вариант, който предполагам не е труден за разбиране. В php-то е ясно - по $_GET['id'] връщаме информация за сътветната картинка.

PHP:
<?php
$id = (int) $_GET['id'];

//и вече изкарваш текста
?>
 
Златен си!Много благодаря,точно това имах предвид,защото съм го виждал и преди!Благодаря отново,и да,разбираемо е,аз горе/долу си имам някакво понятие от Jquery :D

+1 ;)
 

Back
Горе