I'm using a jCarouselLite plugin for creating two image galleries on the main page of my Django-powered site. The code of elements with navigation arrows is generating dynamically like this:
$(document).ready(function ()
{
$('[jq\\:corner]').each(function(index, item)
{
item = $(item); item.corner(item.attr('jq:corner'))
})
$('[jq\\:menu]').each(function (index, item)
{
item = $(item); item.menu(item.attr('jq:menu'))
})
$('[jq\\:carousel]').each(function(index, item)
{
item = $(item); var args = item.attr('jq:carousel').split(/\s+/)
lister = item.parent().attr('class') + '_lister'
item.parent().append('<div id="'+ lister +'"></div>');
$('#' + lister).append("<a class='nav left' href='#'></a><a class='nav right' href='#'></a>");
toparrow = $(item).position().top + $(item).height() - 50;
widtharrow = $(item).width();
$('#' + lister).css({
'display': 'inline-block',
'z-index': 10,
'position': 'absolute',
'margin-left': '-22px',
'top': toparrow,
'width': widtharrow
})
$('#' + lister + ' .nav.right').css({
'margin-left': $('#' + lister).width() + 22
})
item.jCarouselLite({
btnNext: '#' + lister + ' .nav.right',
btnPrev: '#' + lister + ' .nav.left',
visible: parseInt(args[0])
})
})
The problem is that if page is loaded through an url, typed in the adress bar, some functions doesn't work and the second gallery appears with the wrong parameters, but if I came to this page via clicking link - everything works perfectly. It happends only in Google Chrome (Ubuntu, stable 5.0.360.0), but not in Firefox or Opera.
What could be the reason?