Здравствуйте уважаемые знатоки JavaScript
!
Прошу помощи. Задача простая, использовать карусель фоток jcarousel. Фотки грузатся динамически использую метод с php предложеный на сайте разработчиков, при нажатии на фотку она должна отображалаться через fancybox. Все реализовано стандартными функциями с сайта разработчиков
http://sorgalla.com карусель работает, вот только фотки отображаются просто в браузере, т.е. не подключается fancybox. Есть подозрение что, так как список изображений карусели формируется динамически то подключать fancybox следует в функциях jcrousel, а вот где и как не могу разобраться, не силен в js. Вот собственно мой код:
...
<script type="text/javascript" src='js/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src='js/jcarousel/jquery.jcarousel.min.js'></script>
<script type="text/javascript" src='js/nivoslider/jquery.nivo.slider.js'></script>
<script type="text/javascript" src='js/fancybox/jquery.mousewheel-3.0.4.pack.js'></script>
<script type="text/javascript" src='js/fancybox/jquery.easing-1.3.pack.js'></script>
<script type="text/javascript" src='js/fancybox/jquery.fancybox-1.3.4.pack.js'></script>
<link rel="stylesheet" type="text/css" href='js/fancybox/jquery.fancybox-1.3.4.css' media='screen' />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$("a#group").fancybox({
'titlePosition' : 'inside',
'overlayColor' : '#575757',
'overlayOpacity' : 0.7,
'transitionIn' : 'elastic'
});
});
</script>
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'js/jcarousel/dynamic_ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
// carousel.add(first + i, jQuery(this).text());
});
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
var url_m = url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="'+ url_m +'" title="" id="group"><img src="' + url + '" width="218" height="146" alt="" /></a>';
};
jQuery(document).ready(function() {
jQuery('#first-carousel').jcarousel({
// Uncomment the following option if you want items
// which are outside the visible range to be removed
// from the DOM.
// Useful for carousels with MANY items.
// itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback,
auto:1,
start:1,
scroll:1,
animation:1000,
});
jQuery('#second-carousel').jcarousel({
}
);
});
</script>
