Ajax и Fancybox

540

humbert

22 июня 2010, 17:43

3022

Нужно загрузить контент через ajax, в том числе и картинки, которые хотелось бы украсить fancybox.

Знаний по ajax ноль. Как правильно это реализовать?

Парсинг прайс-листов, наполнение интернет-магазина товаром. (https://humbert.ru) Любая CMS (Битрикс, OpenCart, Prestashop и даже Woo Commerce )

75

DkWix

22 июня 2010, 18:17

#1

Нужно загрузить контент через ajax, в том числе и картинки

Для загрузки http://habrahabr.ru/blogs/jquery/71772/

Ну и про fancybox в гугле есть Оочень много интересного, всё жёвано и пережёвано. Хотя бы http://ruseller.com/lessons.php?rub=32&id=238

Если кратко, то подключаете jquery + fancybox. Пишите что-то типа

$(function(){

$("a.img").fancybox();

});

Ну и в теле страницы выводите свои изображения.

540

humbert

22 июня 2010, 18:31

#2

Да я не дожевываю разжеванное, мозгов не хватает.

Есть сайт, в нем div, в него через аякс подгружаю контент с картинками. Картинки через fancybox не работают.

75

DkWix

22 июня 2010, 18:38

#3

Ссылку на сайт

540

humbert

22 июня 2010, 18:58

#4

Он на локальном сервере, я стараюсь много багов в сеть не кидать, не дай Бог Яша подавится

75

DkWix

22 июня 2010, 19:04

#5

Ну чтож, тогда вам повезло. У местных телепатов как раз каникулы, может кто из них и заглянет в эту тему.

За сим откланиваюсь и надеюсь, что к вам придёт озарение.

540

humbert

22 июня 2010, 19:16

#6

У fancybox код такой


<html>

<head>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script>

<script type="text/javascript">$(document).ready(function(){$("a.gallery").fancybox();});</script>

....

</head>

<body>

<a href='/big/img.jpg' class='gallery' target='_blank' title='спасибо телепатам'><img src='/small/img.jpg' class='fancy'></a>

</body>

</html

Но мне надо так примерно


<html>

<head>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script>

<script type="text/javascript">$(document).ready(function(){$("a.gallery").fancybox();});</script>

....

</head>

<body>

<div id='fancy'></div>



<script>

var url='http://site.ru/script.php';

$.post(url, function(data){document.getElementById('fancy').innerHTML=data;});

 </script>

</body>

</html

в script.php тупо пишу


echo "<a href='/big/img.jpg' class='gallery' target='_blank' title='спасибо телепатам'><img src='/small/img.jpg' class='fancy'></a>";

И вот не работает. Понимаю, что мне надо заново проинициализировать

но не хватает знаний

95

4arger

22 июня 2010, 19:37

#7


<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jquery.mousewheel-3.0.2.pack.js"></script>

<script type="text/javascript" src="jquery.fancybox-1.3.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	$("a.fancy").fancybox();

});

</script>

</head>

<body>

<div id='fancy'>

	<a class="fancy" href="1_b.jpg"><img alt="fancy" src="1_s.jpg" /></a>

</div>

</body>

</html>

540

humbert

22 июня 2010, 19:39

#8

Все, разобрался. Добавил в код

<html> 

<head> 

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> 

<script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script> 

<script type="text/javascript">$(document).ready(function(){$("a.gallery").fancybox();});</script> 

.... 

</head> 

<body> 

<div id='fancy'></div> 



<script> 

var url='http://site.ru/script.php'; 

$.post(url, function(data){document.getElementById('fancy').innerHTML=data;}); 





$('a.gallery').fancybox();





 </script> 

</body> 

</html

humbert добавил 22.06.2010 в 23:42

4arger, мне именно подгружать надо в div, т.к. контент разный. То был упрощенный пример.

Выше написал как решил все. Я просто не знал как на аяксе инициализировать заново все нужные теги и действия к ним.

95

4arger

22 июня 2010, 19:45

#9

humbert, мне кажется так лучше будет:

<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
var url='http://site.ru/script.php';
$(document).ready(function(){
$.post(url, function(data){
$('div#fancy').html(data);
});
$("a.gallery").fancybox();
});
</script>

</head>
<body>
<div id='fancy'></div>
</body>
</html

540

humbert

23 июня 2010, 04:10

#10

4arger, в конкретном примере, возможно. Но у меня совсем другое:) Пример был, чтобы понять механизм, упрощенный пример.

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта