Выбор при наведении на картинку

вопрос

Доброго времени суток!

Как сделать что при наведении на картинку появлялась анимация и был выбор: читать полностью или быстрый просмотр

картинка

а если нажать на быстрый просмотр то открывется окошко с кратким описанием

картинка

Мне кажется тут javasсript или jquery. Но прав ли я?
Вообщем помогите пожалуйста!

Ответил: ПафНутиЙ

Вставляем этот текст в блокнот, сохраняем как *.html - радуемся результату, ну и потом подгоняем под DLE

Показать / Скрыть текст

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Выбор при наведении на картинку by ПафНутиЙ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">

  $(function (){
    $("div[id^=img_]").hover(function(){
        $(this).find(".buttons").fadeIn(200);
    }, function () {
        $(this).find(".buttons").fadeOut(200);
        $(this).find(".show_short").fadeOut(100);
    })

    $("a[id^=short_]").click(function(){
        $(this).parent().parent().find(".show_short").fadeIn(100);
    })


  })

  </script>
  <style type="text/css">
  .img_show {
    width: 200px;
    height: 200px;
    position: relative;
    border: solid 1px #ccc;
    float: left;
    margin: 20px;
      }
    .img_show img {
        z-index: -1;
        width: 200px;
        }
        .show_short {
            z-index: 100;
            position: absolute;
            top: 0;
            right: -120px;
            width: 100px;
            height: 180px;
            background: #000000;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 10px;
            display: none;
            }

  .buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: none;
      }
      .buttons a {
        display: block;
        background: #fff;
        margin-bottom: 5px;
          }

  </style>
</head>

<body>
<div id="img_1" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_1" class="buttons">
        <a href="/full/" id="full_1">полная новость</a>
        <a href="#" id="short_1">короткая новость</a>
    </div>
    <div id="short_story_1" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_2" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_2" class="buttons">
        <a href="/full/" id="full_2">полная новость</a>
        <a href="#" id="short_2">короткая новость</a>
    </div>
    <div id="short_story_2" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<div id="img_3" class="img_show">
    <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-plugin.jpg" />
    <div id="but_3" class="buttons">
        <a href="/full/" id="full_3">полная новость</a>
        <a href="#" id="short_3">короткая новость</a>
    </div>
    <div id="short_story_3" class="show_short">Тут всякий текст,&nbsp;который должен отобразиться при клике на "короткую ссылку"</div>
</div>
<br clear="all" />
<p>Специально для <a href="http://dle-faq.ru/" title="dle-faq.ru">dle-faq.ru</a></p>
</body>

</html>

Решение не претендует на суперофигенность, но задачу решает. Дальше допиливайте под конкретику сами, основу я дал.

Причина: Добавил нормальный ответ

14 комментариев

Юзер

mefista10 - 2015-07-082 сентября 2011 16:18 - #1114

Блин случайно, ответил))
Админ исправь плиз...
Повторю еще - Если нужен сайт, могу дать ссылку в л.с

Юзер

pnul - 2015-07-082 сентября 2011 16:44 - #1115

ссылку пожалуйста

Админ

3457

ПафНутиЙ - 2015-07-082 сентября 2011 21:35 - #1118

Ответил на вопрос.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

mefista10 - 2015-07-083 сентября 2011 12:40 - #1132

Класно вышло!Чуть не то что на картинках, но очень даже неплохо!
Спасибо!
Но у меня еще вопрос:
Как вывести новости из кастом?

мой custom

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 12:44 - #1133

Да, так и выводить, вы правильно написали.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

mefista10 - 2015-07-083 сентября 2011 12:50 - #1134

Да не вы не правильно меня поняли, я написал свой кастом, а теперь КАК вывести?
Что куда вставить а то вставляю кастом вместо <img src="http://www.my-html-codes.com/wp-content/uploads/2011/05/jquery-tabs-pl
ugin.jpg" /> выходит какаято хрень...

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 12:59 - #1135

custom выводит новости, а не картинки, шаблон новости настраивается в .tpl файле.
Редактиркуйте TPL, который используется при выводе custom (в вашем случаи shortstory.tpl.
А строку подключения надо писать в main.tpl

Каков вопрос - таков и ответ. Просто помните об этом.

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 12:59 - #1136

***Комментарий удален***

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

mefista10 - 2015-07-083 сентября 2011 13:03 - #1137

Да я с этим разобрался...
Я имел ввиду чтобы выводились новости автоматом, а не через main.tpl
Что мне надо поменять?
<div id="" какой? a href какой?

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 13:09 - #1139

id любой, но обязательно указывать переменную {news-id).
примерно так

id="img_show_{news-id}"

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

mefista10 - 2015-07-083 сентября 2011 13:16 - #1140

<div id="img_show_{news-id}" class="img_show">
    {custom category="1" template="shortstory2" aviable="global" from="0" limit="1" cache="no"}
    <div id="buttons_{news-id}" class="buttons">
        <a href="/full/" id="full_1">полная новость</a>
        <a href="#" id="short_1">короткая новость</a>
    </div>
   <div id="short_story_{news-id}" class="show_short">{short-story}</div>
</div>

Правильно?
А a href какой с id  пол. и кор. новости?

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 13:31 - #1141

нет, не правильно.
в ответе я привёл пример того, как в ИТОГЕ будет выглядить исходный код страницы. Где каждый блок = новость.
помоему затруднений в переносе кода одного блока в tpl файл и присвоением стандартных переменных не должно быть. В противном случаи могу посоветовать перечитать документацию и внимательно посмотреть стандартные шаблоны dle

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

mefista10 - 2015-07-083 сентября 2011 13:40 - #1142

А как тогда правильно? Напиши пожалуйста, чтобы выводились автоматом, и не надо было лезть в main.tpl из-за новой новости

Админ

3457

ПафНутиЙ - 2015-07-083 сентября 2011 14:30 - #1143

советую для начала почитать документацию а не вставлять вывод одной новости в шаблон вывода каждой новости.

Каков вопрос - таков и ответ. Просто помните об этом.