Скрипт ротатора картинок theRotator() JavaScript
|
|
|
2012-05-23Дата: Среда, 23.05.2012, 14:10 | Сообщение # 1 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Код: Code <div id="rotator"> <img class="show" alt="" src="/_example/_img/_anime/_01_800x600.jpg" /> <img src="/_example/_img/_anime/_02_800x600.jpg" alt="" /> <img src="/_example/_img/_anime/_03_800x600.jpg" alt="" /> </div>
Стили: Code <style type="text/css"> #rotator{position:relative;} #rotator img{position:absolute;top:0;left:0;opacity:0;width:300px;} #rotator img.show{z-index:99;} </style>
Скрипт: Code <script type="text/javascript"> function theRotator(){ $('#rotator img').css({opacity: 0.0}); $('#rotator img:first').css({opacity: 1.0}); setInterval('rotate()',5000); }; function rotate(){ var current=($('#rotator img.show')?$('#rotator img.show'):$('#rotator img:first')); var next=((current.next().length)?((current.next().hasClass('show'))?$('#rotator img:first'):current.next()):$('#rotator img:first')); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000).removeClass('show'); }; $(document).ready(function(){theRotator();}); </script>
☑ Пример: Ротатор от Easy Jquery Auto Image Rotator
| | |
|
|
2013-01-17Дата: Четверг, 17.01.2013, 00:22 | Сообщение # 2 |
Сержант
Группа: Проверенные
Статус: Offline
|
Не подскажете как сделать этот скрипт, если у меня картинки должны меняться в <table style="background:url('img.jpg')"> Просто создана таблица, фон которой картинка, а поверх поиск и текст, вот хотелось бы сделать чтобы в этой таблице менялась лишь картинка Background
| | |
|
|
2013-01-17Дата: Четверг, 17.01.2013, 00:46 | Сообщение # 3 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Root, Не подскажете как сделать этот скрипт, если у меня картинки должны меняться в <table style="background:url('img.jpg')"> Код <script type="text/javascript"> document.getElementsByTagName('table')[0].style.background='url(/img'+Math.floor(Math.random()*10)+'.jpg)'; </script> Примерно так..
Случайная фоновая картинка на Java Script
| | |
|
|
2013-01-17Дата: Четверг, 17.01.2013, 03:41 | Сообщение # 4 |
Сержант
Группа: Проверенные
Статус: Offline
|
То есть примерно так получается: И куда класс "show" приписать в таком случае
Код <script type="text/javascript"> document.getElementsByTagName('table')[0].style.background='url(/картинка'+Math.floor(Math.random()*10)+'.jpg)'; </script> <table><tr><td>cодержимое ячейки</td></tr></table>
Ну и код из 1 сообщения: <style type="text/css"> #rotator{position:relative;} #rotator img{position:absolute;top:0;left:0;opacity:0;width:300px;} #rotator img.show{z-index:99;} </style>
<script type="text/javascript"> function theRotator(){ $('#rotator img').css({opacity: 0.0}); $('#rotator img:first').css({opacity: 1.0}); setInterval('rotate()',5000); }; function rotate(){ var current=($('#rotator img.show')?$('#rotator img.show'):$('#rotator img:first')); var next=((current.next().length)?((current.next().hasClass('show'))?$('#rotator img:first'):current.next()):$('#rotator img:first')); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000).removeClass('show'); }; $(document).ready(function(){theRotator();}); </script>
| | |
|
|
2013-01-17Дата: Четверг, 17.01.2013, 09:52 | Сообщение # 5 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Root, Root, То есть примерно так получается: И куда класс "show" приписать в таком случае Нет, совсем не так. К данному скрипту это не приделать - от работает с картинками, а не фоновыми изображениями. То что вам нужно - по ссылке выше.
| | |
|
|
2013-01-18Дата: Пятница, 18.01.2013, 16:54 | Сообщение # 6 |
Рядовой
Группа: Проверенные
Статус: 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-18Дата: Пятница, 18.01.2013, 20:36 | Сообщение # 7 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Tshirtloader, скрипт не вызывается вообще. пробовал так Код jQuery.noConflict(); (function($) { $(document).ready(function() { $('#slider1').slider({ speed: 500 }); }); })(jQuery); Вот так правильно, но нужно переписывать стили по классы и добавлять классы элементам. Возможно и скрипт править придется - у вас 404 по адресу скрипта.
| | |
|
|
2013-01-19Дата: Суббота, 19.01.2013, 00:33 | Сообщение # 8 |
Рядовой
Группа: Проверенные
Статус: 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 | | |
|
|
2013-01-21Дата: Понедельник, 21.01.2013, 02:16 | Сообщение # 9 |
Рядовой
Группа: Проверенные
Статус: Offline
|
Подскажите пожалуйста как к картинкам прописать ссылки, чтобы они были кликабельны?
| | |
|
|
2013-01-21Дата: Понедельник, 21.01.2013, 08:18 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
DMDonskoy, Подскажите пожалуйста как к картинкам прописать ссылки, чтобы они были кликабельны? Так, например: Код <img style="cursor:pointer;" onclick="window.open('http://likbezz.ru/');return false;" src="/.s/img/sh/badd.png" alt="Вебмастерия Аццкого кодера" /> ..
| | |
|
|
2013-01-23Дата: Среда, 23.01.2013, 15:00 | Сообщение # 11 |
Рядовой
Группа: Проверенные
Статус: Offline
|
Пасиба, теперь понял почему у меня не получалось, я пробовал так: Код <a href="Сайт"><img src="картинка" ></a> и так: Код <img src="картинка.gif" onClick="location.href='Сайт'> Кстати заметил одну такую особенность если свернуть браузер или перейти на другую вкладку то при возвращении на страницу ротатор начинает догонять упущенное время и очень быстро перебирает картинки это нормально?
| | |
|
|
2013-01-23Дата: Среда, 23.01.2013, 15:16 | Сообщение # 12 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
DMDonskoy, ротатор начинает догонять упущенное время и очень быстро перебирает картинки это нормально? Не замечал такого: http://likbezz.ru/_example/jquery/galleria/theRotator/theRotator.html ...
| | |
|
|
2013-01-23Дата: Среда, 23.01.2013, 15:32 | Сообщение # 13 |
Рядовой
Группа: Проверенные
Статус: Offline
|
Не замечал такого: http://likbezz.ru/_example/jquery/galleria/theRotator/theRotator.html ... Такого нет в опере, в мозиле очень быстро проходит, а в хроме чем дольше не смотришь на вкладку тем больше мигает... Если подскажешь чем можно записать видео с экрана покажу как это выглядит%)
| | |
|
|
2013-01-23Дата: Среда, 23.01.2013, 16:07 | Сообщение # 14 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
DMDonskoy, Если подскажешь чем можно записать видео с экрана покажу как это выглядит%) Записать видео можно любой программой для захвата экрана, например: CamStudio (Яндекс.Диск, 1,66 МБ). Впрочем, я представляю как это выглядит - уже посмотрел) В мозилле нет, а вот в хроме наблюдаю. ..
| | |
|
|
2014-06-14Дата: Суббота, 14.06.2014, 16:16 | Сообщение # 15 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Jquery Image Rotator Functionality Checklist.
What we need our Jquery image rotator to do:
1. Rotate Images with Links. 2. Valid XHTML. 3. Lightweight Script.
The HTML Код <div class="rotator"> <ul> <li class="show"> <a href="javascript:void(0)"> <img src="images/image-1.jpg" width="500" height="313" alt="pic1" /> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/image-2.jpg" width="500" height="313" alt="pic2" /> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/image-3.jpg" width="500" height="313" alt="pic3" /> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/image-4.jpg" width="500" height="313" alt="pic4" /> </a> </li> </ul> </div>
The CSS
Код /* rotator in-page placement */ div.rotator { position:relative; height:345px; display:none; } /* rotator css */ div.rotator ul { margin:0; padding:0; } div.rotator ul li { float:left; position:absolute; list-style: none; } /* rotator image style */ div.rotator ul li img { border:1px solid #ccc; padding: 4px; background: #FFF; } div.rotator ul li.show { z-index:500; }
The JavaScript Код <script type="text/javascript">
function theRotator() { //Set the opacity of all images to 0 $('div.rotator ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div.rotator ul li:first').css({opacity: 1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds if ($('div.rotator ul li').length > 1) { setTimeout('rotate()', 6000); } }
function rotate() { //Get the first image var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
//Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first')); //Un-comment the 3 lines below to get the images in random order //var sibs = current.siblings(); //var rndNum = Math.floor(Math.random() * sibs.length ); //var next = $( sibs[ rndNum ] );
//Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the current image current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 6000);}) .removeClass('show'); };
$(document).ready(function() { //Load the slideshow theRotator(); $('div.rotator').fadeIn(1000); $('div.rotator ul li').fadeIn(1000); // tweek for IE });
</script>
Include jquery and the below script in your page or in an attached file.
| | |
|