|
2012-12-13Дата: Четверг, 13.12.2012, 14:37 | Сообщение #1 | Тема: Смена фона без перегрузки с анимационными эфектами |
Рядовой
Группа: Проверенные
Статус: Offline
|
Подскажите, likbezz, воспользовался Вашим вариантом скрипта ссылка на тест страницы http://test1.raindropstravel.ru/index.php?id=1
Не могу адаптировать под эту страницу плавную смену изображений.
интересует вариант http://likbezz.ru/_example/jscript/2011/rand_bg/rand_bg_5.html
Возможно что то делается не так. После постановки данного кода пропадают вообще изображения.
| | |
|
|
2013-01-18Дата: Пятница, 18.01.2013, 16:54 | Сообщение #2 | Тема: Скрипт ротатора картинок theRotator() JavaScript |
Рядовой
Группа: Проверенные
Статус: Offline
|
Вопрос по jquery. про галерею со слайдером.(http://raindropstravel.ru/index.php?id=6 вкладки семейная и студия)а нужно сделать для всех шести.
вот так выглядит код хтмл места где вызывается скрипт.
Код <script type="text/javascript"> jQuery.noConflict(); (function($) { $(document).ready(function() { $('#slider').slider({ speed: 500 }); }); })(jQuery);
</script> <div id="container"> <div id="slider"> ... ...
Они находятся по принципу вкладок, поэтому, страница фактически одна. Для разделения функциональности скриптов пробовал:
- переименовать стили для второй галереи на Код <div id="container1"> <div id="slider1">
и вызов
Код
jQuery.noConflict(); (function($) { $(document).ready(function() { $('#slider').slider1({ speed: 500 }); }); })(jQuery);
скрипт не вызывается вообще.
пробовал так
Код jQuery.noConflict(); (function($) { $(document).ready(function() { $('#slider1').slider({ speed: 500 }); }); })(jQuery);
все заработало, но такого хаоса в порядке выхода фотографий не достигнуть даже на рандомайзе.
Подскажите, пожалуйста. Должно выйти, чтобы один и тот же скрипт поддерживал 5 разных галерей в пределах 1й страницы, но по разным вкладкам.
| | |
|
|
2013-01-19Дата: Суббота, 19.01.2013, 00:33 | Сообщение #3 | Тема: Скрипт ротатора картинок theRotator() JavaScript |
Рядовой
Группа: Проверенные
Статус: Offline
|
но нужно переписывать стили по классы и добавлять классы элементам. воот, данное действие проделал. и в самом скрипте переименовал переменные, но сказать по правде, результат остался тот же..
у вас 404 по адресу скрипта.
код скрипта Код (function($) { $.fn.extend({ slider: function(options) { var settings = $.extend({ speed: 500 }, options); return this.each(function() { var slidercontents = $(this).addClass('image-slider-contents'); var slider = $('<div/>').addClass('image-slider').attr('id', slidercontents.attr('id')); var backbutton = $('<div/>').addClass('image-slider-back'); var forwardbutton = $('<div/>').addClass('image-slider-forward'); slidercontents.removeAttr('id'); slidercontents.before(slider); slider.append(backbutton); slider.append(slidercontents); slider.append(forwardbutton); var total = $('> div', slidercontents).length; var left = 0; var w; var width; var maxScroll; slider.append($('<div/>').css('display', 'none').addClass('preview').append($('<div/>').addClass('img-large') .append($('<div/>').html(' ').click(function(e) { e.stopPropagation(); e.stopImmediatePropagation(); //display previous image var img = $(this).parent().find('img'); var index = parseInt(img.attr('class')); img.removeAttr('class'); if (index > 1) { index--; var src = $('.' + index + ' div img').attr('src'); var txt = $('.' + index + ' div a').html(); $('.preview').find('.label').html(txt); $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000); } else $('.preview').find('img').addClass('' + (index) + ''); }).addClass('left').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') })) .append($('<div/>').html(' ').click(function(e) { e.stopPropagation(); e.stopImmediatePropagation(); //display next image var img = $(this).parent().find('img'); var index = parseInt(img.attr('class')); img.removeAttr('class'); if (index < total) { index++; var src = $('.' + index + ' div img').attr('src'); var txt = $('.' + index + ' div a').html(); $('.preview').find('.label').html(txt); $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000); } else $('.preview').find('img').addClass('' + (index) + '') }).addClass('right').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') })) .append($('<img/>'))).append($('<div/>').addClass('label').css('opacity', '0.8')) .append($('<div/>').addClass('close').click(function(e) { $(this).parent().fadeOut("slow"); }))); $(document).click(function(e) { if ($('.preview').css('display') == 'block') $('.preview').fadeOut("slow"); }); function initialize() { var tempElements = $('> div', slidercontents); var allElements = new Array(); tempElements.each(function(index, el) { allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el)); });
allElements = $(allElements); $('> div', slidercontents).remove(); var wrapper = $('<div/>').addClass('contents-wrapper'); allElements.each(function(index, el) {
wrapper.append($(el)); }); slidercontents.append(wrapper); var w = $('.outer:eq(0)', slidercontents).outerWidth() + parseFloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)', slidercontents).css('margin-right')); var width = (total+1) * w; var maxScroll = width - $('.image-slider-contents').outerWidth(); wrapper.css({ width: width }); $('> div > div', slidercontents).css('display', ''); $('.outer', slidercontents).each(function(index) { $(this).prepend($('<img/>').attr('src', 'галерея1/images/zoom.png').addClass('zoom') .css({ cursor: 'pointer', 'position': 'relative', 'float': 'right', marginRight: -10, top: -14, width: 34, height: 32 }));
}); $('.outer a').click(function(e){ e.stopPropagation(); e.stopImmediatePropagation();
}); $('.outer').hover(function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); }).click( function(e) { e.stopPropagation(); e.stopImmediatePropagation(); var cls = $(this).attr('class').split(' ')[0]; var p = $(this).find('div'); var img = p.find('img').attr('src'); var preview = $('.preview'); var l = $('.image-slider').width()/2 - preview.outerWidth() / 2; var t = (p.offset().top - preview.height()); t -= t / 2; preview.css({ left: l, top: 0 }); var text = p.find('a').html(); preview.find('img').attr('src', img).addClass(cls); preview.find('.label').html(text); preview.fadeIn("slow");
});
forwardbutton.click(function() { left -= w; if (left + maxScroll >= 0) { $('.contents-wrapper').stop(false, true).animate({ left: '-=' + w }, settings.speed); } else left += w; }); backbutton.click(function() { if (left < 0) { left += w; $('.contents-wrapper').stop(false, true).animate({ left: '+=' + w }, settings.speed); } }); } initialize();
function getDimensions(value) { return value + 'px'; }
}); } }); })(jQuery);
Сообщение отредактировал Tshirtloader - Суббота, 19.01.2013, 00:35 | | |
|