Взлом/плагин WordPress, необходимый для наведения курсора на ссылку, показа изображения в DIV (галерее)

Я разрабатываю сайт WordPress для художественной галереи. Клиенту нужна галерея изображений списка художников, точно такая же, как эта: http://www.walkercontemporary.com/artists/

Я создал собственный тип сообщений, который генерирует список со ссылками на определенный контент исполнителя. Теперь мне нужен эффект, который отображает образец изображения в соседнем DIV при наведении курсора на ссылку. Основываясь на исходном коде вышеуказанного сайта, я уверен, что это функция Dreamweaver. Я хотел бы, чтобы мое решение было интегрировано в простые в использовании возможности CMS WordPress. В противном случае я посоветую клиенту искать другое решение. У них нет возможности поддерживать большой список художников, занимающихся ручным кодированием, и они не хотят, чтобы посетители наводили курсор на эскизы (именно к этому приближаются многие другие решения).

В идеале я хотел бы, чтобы какое-то значение REL или автоматически сгенерированные значения onmouseover генерировались в элементах списка, которые вызывают избранное изображение, связанное с каждым художником в пользовательском типе сообщения. Это возможно? -спасибо - Стив


person weevie833    schedule 06.07.2012    source источник
comment
Я думаю, вам нужно загружать все изображения при загрузке страницы, а затем скрывать их, кроме выбранного в данный момент, потому что, если вы загружаете их при наведении, вам придется ждать, пока изображение не придет с сервера.   -  person The Alpha    schedule 06.07.2012


Ответы (1)


по какой-то причине я не мог зайти на ваш сайт, чтобы посмотреть пример.

Но если я правильно понял, все, что вам нужно, это 3-4 строки jQuery..

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));// if you want to add description also
});

ДЕМО

ИЗМЕНИТЬ I

После комментария ОП -

Признаю, что был не прав... вам не нужно 4 строки кода — вам нужно всего 2. :-)

Но я не ошибся в том, что один и тот же код будет работать и для наведения, и для клика. это по сути то же самое.

вам нужно только изменить слово (функция) «CLICK» на «HOVER» (обратите внимание, что больше ничего не менялось)

$('#thumbs img').hover(function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    });

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

  1. Поменяйтесь местами с большим пальцем
  2. Обмен с живыми ссылками
  3. Обмен фиктивными ссылками

Посмотреть их все можно здесь: Демонстрация

надеюсь теперь понятно.

ИЗМЕНИТЬ II

МОЙ БОГ !! Я снова ошибся. Код должен быть еще КОРОЧЕ! (нет необходимости замены())

$('#largeImage2').attr('src',$(this).attr('href'));

Финальная демонстрация (сокращенный код)

(и, кстати, нет такой вещи, как «функция Dreamweaver», когда сайт работает на сервере — Dreamweaver — это всего лишь пользовательский интерфейс, который создает КОД. Это может быть html / javascript / php или что-то еще. это в конце просто TXT, в этом отношении - у него нет "особенностей" в отношении выполнения кода, его можно рассматривать как графический интерфейс для Блокнота :-) . часть кода «MM», которую вы видите, является обычным JAVASCRIPT (и даже не оптимальным), который вставляется через Dreamweaver. это все)

person Obmerk Kronen    schedule 06.07.2012
comment
Я думаю, вы не поняли вопроса! - person The Alpha; 06.07.2012
comment
может быть, как я уже сказал, ваш URL-адрес примера не может быть доступен мне. но посмотрите на DEMO еще раз. - person Obmerk Kronen; 06.07.2012
comment
Я не задавал вопрос, и он упомянул эффект наведения для временного изменения основного изображения. - person The Alpha; 06.07.2012
comment
Я понимаю - но HOVER или CLICK - это одно и то же. - person Obmerk Kronen; 06.07.2012
comment
HOVER и CLICK — это не одно и то же. Демо не решает вопрос. Повторите попытку, чтобы просмотреть исходный URL-адрес примера. Очень признателен. - Стив - person weevie833; 07.07.2012
comment
ты прав . это не так .. вам просто нужно изменить слово CLICK на HOVER . я имел в виду, что КОД один и тот же для HOVER и CLICK :-) см. мое обновление. - person Obmerk Kronen; 07.07.2012
comment
@Sheikh Heera - теперь, когда я увидел демоверсию (через прокси), я совершенно уверен, что понял правильно. - person Obmerk Kronen; 07.07.2012