Автоматическая смена изображений со случайным выводом

[Admin]

В комментарии 1008 к теме Автоматическая смена изображений (слайд-шоу) мы предложили простой способ, как сделать смену изображений в случайном порядке.

Т.к. к нам поступила просьба немного доработать скрипт, чтобы изображения не повторялись, то выкладываем немного измененный и упрощенный код, в котором при случайном выборе картинки изображения не повторяются:

Код:

<script type="text/javascript">
all_images = new Array ("image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png");
var lock = false;
var run;
var new_img=0;
var old_img=0;

function chgImg() {
if (document.images) {
  new_img=all_images[Math.floor(Math.random()*all_images.length)];
  if (old_img==new_img) chgImg();
  else {
      old_img=new_img;
      document.slide_show.src = old_img;
  }
}
}

function auto() {
if (lock == true) {
  lock = false;
  window.clearInterval(run);
}
else if (lock == false) {
  lock = true;
  run = setInterval("chgImg()", 2500);
}
}
auto();
</script>

<div align="center">
<table border="0">
  <tr align="center">
   <td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
  </tr>
  <tr align="center">
   <td align="right"><a href="javascript:chgImg()">Предыдущая</a></td>
   <td align="center"><a href="javascript:auto()">Старт/Стоп</a></td>
   <td align="left"><a href="javascript:chgImg()">Следующая</a></td>
  </tr>
</table>
</div>

[Admin]

В продолжение темы, в личку было получено сообщение:

Цитата:Большое Вам спасибо!

У вас на сайте огромное количество полезных штук.
Передо мной вот встал вопрос как сделать, что б при наведении мышки блок с фотографией увеличивался. Т.е. сам блок увеличивался, фотография не изменялась в размерах, а блоки оставались все на месте.
Примером служит любая страничка instagram с компьютера (например, instagram.com/mcdonalds).
Там наведя мышку на блок - он раздвигается + появляется текст.
В общем нигде не нашел такую штуку.

Если такой модуль окажется интересен этому сайту, был бы рад видеть как такое осуществить ))

Для этого нам придется воспользоваться библиотекой jQuery и примерно вот таким кодом (правда в IE немного кривовато вышло):

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
all_images = new Array ("image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png");
var lock = false;
var run;
var new_img=0;
var old_img=0;

function chgImg() {
if (document.images) {
    new_img=all_images[Math.floor(Math.random()*all_images.length)];
    if (old_img==new_img) chgImg();
    else {
        old_img=new_img;
        document.slide_show.src = old_img;
    }
}
}

function auto() {
if (lock == true) {
    lock = false;
    window.clearInterval(run);
}
else if (lock == false) {
    lock = true;
    run = setInterval("chgImg()", 2500);
}
}

$(document).ready(function(){
    auto();
    $('.bg, [name="slide_show"]').mouseenter(function(){$('.bg').stop().animate({height: "190px", width: "360px"}, 300);});
    $('.bg, [name="slide_show"]').mouseleave(function(){$('.bg').stop().animate({height: "150px", width: "340px"}, 300);});

});
</script>


<div align="center">
<div style="position:relative; width:400; height:225px; vertical-align: middle; display: table-cell; background-color:#999999;">
  <div class="bg" style="width:340; height:150px; background-color:#eeeeee; border-radius:11px;"></div>
  <div style="position:absolute; top:50px; left:50px;">
   <img src="image/img_1.png" name="slide_show" width=300 height=125>
  </div>
</div>

<div align="center">
  <a href="javascript:chgImg()">Предыдущая</a>
  <a href="javascript:auto()">Старт/Стоп</a>
  <a href="javascript:chgImg()">Следующая</a>
</div>
</div>

[Oktav]

Добрый день! Сказать, что я ничего не понимаю в программировании - значит промолчать! Я всю жизнь думал, что эти эффекты смены фото делаются с помощью флэш-анимации. Сейчас меня интересуют ваши навыки. У меня есть сайт интернет магазин dreamline.com.ru, и я хочу переделать его. Хочу сделать его более "анимированным". Очень надеюсь на вашу помощь. Жду ваших идей и цен вопроса в ЛС!

[Admin]

Что Вы подразумеваете под более "анимированным"? Не совсем понятно, что именно Вам надо.

Если Вам нужен какой-нибудь конкретный скрипт или его модификация, то опишите подробнее, а разработкой дизайнов и сайтов в целом я не занимаюсь, т.к. на это нет времени и весь данный сайт это хобби, никак не связанное с моей основной работой.