Быстрая смена изображений

Question

Быстрая смена изображений

0

Я делаю галерею изображений. У меня 9 полей, в каждом поле есть изображение (или, лучше, есть часть изображения). В общем, у меня есть 9 больших изображений, и в каждом из этих полей есть 1/9 каждого большого изображения.

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

Хорошо, это я могу сделать с помощью CSS и немного JS, но я ищу какой-либо эффект javascript/jQuery, скажем, чтобы изменить изображение по изображению из верхнего угла в левый нижний угол, любое плавное изменение между изображений.

Пример: 3 изображения:

HTML:

<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">

CSS:

img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}

.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}

JavaScript:

function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}

(скрипка)

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

Благодарю.

Roman 05 янв. 2014, в 15:08

Источник

0

Если у вас есть jsFiddle, вы также должны включить свой код здесь
Ashley Medway 05 янв. 2014, в 13:38
0

Вы можете связать скрипты здесь без проблем, но вы все равно должны опубликовать некоторый код.
Neikos 05 янв. 2014, в 13:38

Теги:

javascript

jquery

image

2 ответа

Ещё вопросы

Если у вас есть jsFiddle, вы также должны включить свой код здесь
Вы можете связать скрипты здесь без проблем, но вы все равно должны опубликовать некоторый код.

Afzaal Ahmad Zeeshan · Answer 1 · 2014-01-05T11-28-00.000Z

Хорошо, я понимаю ваш вопрос сейчас!

Вы имеете в виду, что когда вы наводите изображение на изображение, остальные изображения заменяются оставшимися частями, и все 9 изображений совпадают до завершения изображения?

Вам необходимо установить эти функции!

Попробуйте удалить функцию onmouseover из элемента и попытайтесь использовать jQuery для этого!

Давайте начнем пример!

Пример изображения:

<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />

Сначала вам нужно получить изображение, на котором произошло событие мыши, например:

$('img').mouseover(function () {
  var id = $(this).attr('id');
  var class = $(this).attr('class');
  if(id == 'red') {
    if(class == 'image5') {
    /* replace all the other images with red one 
     * here you will check the image class too, which is the number
     * location where it is present at!
     */
    }
  }
}

После этого вам тоже нужно будет переместить изображение! Для этого используйте это:

$('img').mouseleave(function () {
  // shift the src tag back as
  $('.image5').attr('src', 'its/src/to_file5.png');
  $('.image7').attr('src', 'its/src/to_file7.png');
  $('.image6').attr('src', 'its/src/to_file6.png');
}

И так далее.

И да, вам понадобится сохранить изображения в браузере в виде загруженных файлов на загрузке страницы и просто перемещать их после того, как пользователь наведет на вас курсор!

В вашей скрипке все, что вы делаете, это добавление имени класса, но вы не mouseleave или не возвращаете его обратно на событие mouseleave; нет события mouseleave.

Спасибо за Ваш ответ. Мне не нужно возвращаться к схеме по умолчанию. Нет проблем. Я написал больше в комментарии к решению Shadow Wizard, смотрите.
Затем вы можете использовать анимацию, и изменить первый и затем на второй, а затем на финал! :)

Shadow Wizard · Answer 2 · 2014-01-05T10-54-00.000Z

Вы можете использовать метод jQuery UI switchClass() который позволяет анимировать весь класс.

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

function show_image(id) {
    $('img').each(function() {
        var className = this.className;
        if (className == id)
            className = '';
        $(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
    });
}

Поскольку он удаляет один класс и добавляет другой, если тот, который вы удаляете и добавляете, тот же, он не будет работать, поэтому необходимо проверить и сбросить.

Что касается "линейного", это просто мой личный выбор метода ослабления, выберите свой собственный из полного списка.

Обновлена скрипка.

Ах, извините, спасибо за обновленную ссылку на скрипку! К вашему решению. Мне нужно поменять пальцы один за другим. Вы можете представить его как лист бумаги (эти 9 миниатюр - это один лист бумаги, а при наведении курсора вверх вы поднимаете лист в верхнем правом углу и поворачиваете его в левый нижний угол). Не меняйте все превью в один момент.