JQuery изменить изображение при наведении (и затем вернуться к исходному изображению)

Question

У меня есть фотогалерея, и я действительно хочу поменять каждое изображение при наведении на другое изображение. я извлекаю изображения динамически, из базы данных (это практически вектор изображений)

сейчас я использую плагин jquery, но он не работает. Единственный способ, которым это работает, - это если я статически идентифицирую идентификатор (всегда один и тот же), но тогда это меняет только любое изображение с одним конкретным изображением. Что я могу сделать? у меня есть код:

  <? foreach ($paginated_products as $product):?>
  <? $image =  $product->images->limit(2)->find_all();  ?>

     <script>

    $('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });</script>
    //this way doesn;t work at all. if i put simply img#nav , it only changes me with a single image.

    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>"></img>

Answer 1

Разве вы не должны разделить свой сценарий на 2 части?

Вы не можете работать с функциями $ (...). Hover (), поскольку jquery еще не инициализирован.

PS: не могли бы вы отобразить часть сгенерированного HTML.

Первый должен понравиться:

<script>

$(document).ready(function() {
    <? foreach ($paginated_products as $product):?>
        <? $image =  $product->images->limit(2)->find_all();  ?>
        $('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });
    <?php endforeach; ?>

});
</script>

Тогда у вас будет вторая часть в вашем теле (куда должны идти картинки)

<?php foreach ($paginated_products as $product):?>
    <?php $image =  $product->images->limit(2)->find_all();  ?>
    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>" />
<?php endforeach; ?>

Answer 2

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

Answer 3

jQuery(document).ready(function($) {
    $('<img src="//replace with php src call" id="//replace with php id call" onMouseOver="hoverImg()" onMouseOut="resetImg()"/>').insertAfter('//the element that the image will be place after in the HTML');
});

function hoverImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with hover image source";
}

function resetImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with original image source";
}

Это один из способов сделать это (если вы не хотите добавлять элемент <img> через jQuery)

Answer 4

Если бы у вас была ссылка для каждого изображения, вы могли бы указать класс для каждого изображения и просматривать их при наведении курсора. Вот пример того, как сделать это с 3 изображениями:

http://jsfiddle.net/briguy37/QSQ62/

UPDATE

Кроме того, вот пример, где вы можете изменить фоновое изображение напрямую с помощью JQuery, чтобы вам не приходилось писать кучу определений классов CSS. Вам нужно изменить это, чтобы вызывать соответствующие URL-адреса изображений для загрузки их из базы данных:

http://jsfiddle.net/briguy37/QSQ62/3/

Answer 5

Кажется, где-то есть несоответствие, согласно вашему комментарию $image[1] - это целое число, но согласно вашему коду это объект.

Если это объект, nav<?php echo $image[1]; ?> оставит вас с множеством идентичных идентификаторов, что объясняет вашу проблему.

Скорее всего (я не видел ваши классы ...) идентификатор хранится где-то в объекте, поэтому вам придется использовать что-то вроде $image[1]->id вместо $image[1].

Answer 6

Вам лучше предоставить объект ключ / значение для альтернатив.

 <script>
    var altImages = {
<?php
    $images = array();
    foreach ($paginated_products as $product) {
        $cImage =  $product->images->limit(2)->find_all();
?>
                      "<?php echo $image[1]->url; ?>": "<?php echo $image[0]->url; ?>",
<?php
        $images[] = $cImage;
    }
?>
    };

    $(document).ready(function() {
        $('.switch-img').hover(function() {
            $(this).data('old-src', $(this).attr('src'));
            $(this).attr('src', altImages[$(this).attr('src')]);
        }, function() {
            $(this).attr('src', $(this).data('old-src'));
        });
    });
</script>

<?php
    foreach ($images as $cImage) {
?>
    <img src="<?php echo $cImage[1]->url; ?>" class="switch-img" />
<?php
    }
?>