Как придать изображениям эффект лавовой лампы с помощью jquery

#jquery #css #lavalamp

Вопрос:

У меня есть объемные изображения внутри элемента div, поэтому мне нужно придать какой-то приятный эффект лавовой лампы тем изображениям, которые я не могу получить, и я последовал некоторым примерам с сайта ниже:

http://nixbox.com/projects/jquery-lavalamp/demos

Кто-нибудь может мне помочь?

Вот мой код:

  $('#showfilelist').append("<div id="   file.id   "><a href='uploads/"   document.getElementById("currentDirectory").value   "/"   file.name   "' target='_blank' rel='gallery'><img src='uploads/"   document.getElementById("currentDirectory").value   "/"   file.name   "'width='50' height='50' class='images'/></a></div>");

Это мой CSS-код для эффекта лавы:

  .images
        {
        border: 1px solid #33CC33;
        background-color:#CCFFCC;
        z-index:1;
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px;  
        border-radius: 3px;
        box-shadow: 2px 2px 3px #000;
        -webkit-box-shadow: 2px 2px 3px #000;
        -moz-box-shadow: 2px 2px 3px #000;
        }

Это сценарий:

  $('images').lavaLamp({
            target: 'img',
            autoResize: true
        });

1. почему вы используете этот длинный синтаксис document.getElementById("currentDirectory").value при использовании jQuery?

2. То есть получить значение сеанса, которое сохраняется.

3. значение сеанса? Сеансы управляются сервером, а не клиентом. Я думаю, вы имеете в виду, что у вас есть некоторые пользовательские данные, скрытые в элементе с идентификатором «CurrentDirectory», которые вы все равно можете использовать $('#currentDirectory').val()

4. Да, у меня есть скрытое значение, из которого я это получаю.

Ответ №1:

может быть, вы просто пропустили точку в селекторе классов jQuery?

  $('.images').lavaLamp({
        target: 'img',
        autoResize: true
    });

вот рабочая версия

http://jsfiddle.net/Bpnca/84/

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

1. О, спасибо, что исправили эту ошибку, и все же я не могу получить это после этого. Я просто получаю зеленый фон для каждого изображения.

2. можете ли вы опубликовать ссылку на вашу страницу?

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

4. Большое вам спасибо, что нашли время и дали мне ответ.

5. нет проблем, братан, я должен признать, что это заняло некоторое время, потому что я никогда не видел этот плагин b4