Как сделать описание фото с hover эффектом?

<<

BVB-Russe

Аватара пользователя

Автор темы

Сообщения: 25

Зарегистрирован: 02 янв 2013, 18:18

Благодарил (а): 6 раз.
Поблагодарили: 0 раз.

Сообщение 02 сен 2015, 19:46

Re: Как сделать описание фото с hover эффектом?

Admin писал(а):В-третьих, естественно, для каждого изображения нужно будет вставлять код и следить за его чистотой. Одна ошибка, и эффекта не будет.

Это как раз жаль. Я просто думал, будет работать по принципу, как автоматически делается подпись в посте Блога. То есть, я не задумываюсь о вставке кода в каждое фото, а просто пишу то, что хочу написать и оно само оформляется кодом. Вот я думал, что оно именно так функционирует.

Но мне ваш пример очень нравится. А какой там код у него и что куда нужно вставлять?

Добавлено спустя 5 минут 14 секунд:
Да, забыл добавить: то, что фото не увеличивается по клику, это, конечно, не есть гуд, учитывая, что в постах могут быть фото разных размеров. И тем более при том факте, что у меня ширина контентной колонки 555px. То есть, если я делаю какие-то свои фото, то изначально публикую в полном размере. Если же фото сторонние, они могут быть разных размеров. Кроме того, черное затенение именно самого фото (не описания) тоже не очень.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 09 сен 2015, 12:44

Re: Как сделать описание фото с hover эффектом?

BVB-Russe писал(а):Это как раз жаль. Я просто думал, будет работать по принципу, как автоматически делается подпись в посте Блога. То есть, я не задумываюсь о вставке кода в каждое фото, а просто пишу то, что хочу написать и оно само оформляется кодом. Вот я думал, что оно именно так функционирует.

Думаю, так тоже может функционировать, но для этого нужно самостоятельно писать скрипт. Я не пишу.
BVB-Russe писал(а):Но мне ваш пример очень нравится. А какой там код у него и что куда нужно вставлять?

В шаблон, до закрывающего тега
  Код:
</body>

вставляете код:
  Код:
<script src='URL_адрес_файла_jquery-1.3.2.js' type='text/javascript'/>
<script src='URL_адрес_файла_jquery.capSlide.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
               
                $(&quot;.capslide_img_cont&quot;).capslide({
                    caption_color : &#39;#bfedfa&#39;,
                    caption_bgcolor : &#39;#000&#39;,
                    overlay_bgcolor : &#39;#000&#39;,
                    border   : &#39;5px solid #E6E6E6&#39;,
                    showcaption     : false
                });
                $(&quot;#capslide_img_cont2&quot;).capslide({
                    caption_color : &#39;#bfedfa&#39;,
                    caption_bgcolor : &#39;#000&#39;,
                    overlay_bgcolor : &#39;#000&#39;,
                    border   : &#39;4px solid #E6E6E6&#39;,
                    showcaption     : false
                });

            });
        </script>

Этот код устанавливается один раз. Файлы предварительно нужно куда-нибудь закачать. Я пользуюсь сайтом на народе, который переехал на юкоз. Ссылка на файл первый, второй. Сохраняете себе на компьютер в блокноте, заливаете на какой-нибудь хостинг. Я давно ничем другим не пользовалась, поэтому с этим вопросом не помогу, погуглите. Раньше ещё использовала сайты google.
В сообщениях все изображения оформляете следующим кодом:
  Код:
<div class="ic_container capslide_img_cont">
<img src="URL_адрес_изображения" height="XXX" width="XXX" />
<div class="overlay" style="display: none;">
</div>
<div class="ic_caption">
<div class="ic_text">
Описание к изображению</div>
</div>
</div>

BVB-Russe писал(а):Добавлено спустя 5 минут 14 секунд:
Да, забыл добавить: то, что фото не увеличивается по клику, это, конечно, не есть гуд, учитывая, что в постах могут быть фото разных размеров.
Согласна. Попробуйте, оставьте изображение в ссылке, может у вас получится. У меня не кликается изображение, хоть и в ссылке. Код такой:
  Код:
<div class="ic_container capslide_img_cont">
<a href="http://2.bp.blogspot.com/-UEGP6rBuhqk/TV0ChBSbyZI/AAAAAAAABRo/AAZUxifEjxc/s1600/P1030581%255B3%255D" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-UEGP6rBuhqk/TV0ChBSbyZI/AAAAAAAABRo/AAZUxifEjxc/s320/P1030581%255B3%255D" /></a>
<div class="overlay" style="display: none;">
</div>
<div class="ic_caption">
<div class="ic_text">
Описание к третьему изображению</div>
</div>
</div>
<<

BVB-Russe

Аватара пользователя

Автор темы

Сообщения: 25

Зарегистрирован: 02 янв 2013, 18:18

Благодарил (а): 6 раз.
Поблагодарили: 0 раз.

Сообщение 09 сен 2015, 15:40

Re: Как сделать описание фото с hover эффектом?

[quote="Admin"][/quote]
Екатерина, спасибо вам большое за потраченные время и действия, признателен Вам за помощь и поддержку. Остальное я сам сделаю. :) Все-таки куда вставлять что, это я могу )))

Как сделаю, отпишусь по тому, что у меня получилось.
Пред.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Google Feedfetcher

cron
Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo