JQuery наводит на экран информацию, относящуюся к изображению из базы данных на основе идентификатора

0

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

Я пробовал несколько вещей с jquery, но, похоже, никуда не денусь.

Базовая версия строки базы данных, отображаемой на html:

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1"></div>    

<img src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/peter-pan-cars-sports-car-hd-wallppers-cool-desktop-images.jpg" class="post" id="2">
<div class="ad_fade" id="fade2"></div>         

<img src="http://www.hdwallpapers.in/walls/corvette_mallett_concept_car-HD.jpg" class="post" id="3">
<div class="ad_fade" id="fade3"></div>

в php-коде у меня есть каждый тег img, например, id: id = "'. $ id.'" где $ id - уникальный идентификатор, возвращаемый из базы данных

стилизация:

.post{
    width:100px;
    height:100px;
}
.ad_fade{
    display:none;
    position:absolute;
    margin:-105px 0 0;
    width:100px;
    height:100px;
    background:rgba(255,255,255,0.8);
}

http://jsfiddle.net/g45db/

Я пытаюсь создать аналогичный эффект, как показано на: http://dribbble.com/ Он должен динамически определять соответствующую информацию для этого конкретного изображения.

Вся помощь приветствуется!

Теги:

3 ответа

1
Лучший ответ

Попробуйте это,

$(function(){
    $('img.post').hover(function(){
        $(this).next('div').show().html(this.src);
         // you can use ajax to get data from database
    });
});

Демо-версия

Обновлена попытка использовать mouseleave на div.ad_fade как

$(function () {
    $('img.post').hover(function () {
        $(this).next('div').show().html($(this).data('title')); // using title here
        // you can use ajax to get data from database
    });
    $('div.ad_fade').on('mouseleave',function(){ // mouse leave for fadeout div
        $(this).fadeOut(1000).html('');
    });
});

Обновленная демоверсия

Поделиться
  • 0
    как я могу сделать исчезновение? у меня все остальное идет jsfiddle.net/g45db/4
  • 0
    Смотрите мой обновленный ответ и демо
Показать ещё 3 комментария
0

Самый простой способ отобразить название и описание, использовать атрибут title тега img, как показано ниже

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1" title="Title and Description">

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

<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1">Title and Description details</div> 

  $('img').mouseenter(function(){
    $(this).next('.ad_fade').show();
  });

  $('.ad_fade').mouseleave(function(){
    $(this).hide();
  });
Поделиться
  • 0
    Метод closest () используется для обхода элемента для его предков, а OP имеет элемент после изображения, поэтому функция ближайшего не будет работать здесь. Попробуйте следующий ()
  • 0
    самым близким является также работа в этом случае, как я пытался, но да, вы правы, что это должно быть следующим (). Позвольте мне обновить мой ответ. Спасибо @Рохан Кумар
Показать ещё 2 комментария
0

Вам либо нужен контейнер для хранения названия и описания при наведении на img, создайте в виде двух отдельных divs

Попробуйте хранить информацию в теге img в качестве заголовка данных и описания данных, а затем примените onmouse к функции jquery для отображения эффектов зависания

$('img').onmouseover(function(){
var $this = $(this);
var title = $this.data('title');
// try to append title and description in previously created divs
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню