Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Динамическое изменение размера шаблонов shortstory.tpl

Динамическое изменение размера шаблонов shortstory.tpl


     05.04.2012    Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Хаки    3133

вопрос
Как сделать так чтобы новости отображались таким образом?
Выбор шаблона новости, например BIG или SMALL, и чтобы новости чередовали, после BIG стояли 4 SMALL, а ниже наоборот.
Динамическое изменение размера шаблонов shortstory.tpl

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


Используй табличную верстку + {custom category} и все! В нете ест новостной шаблон для DLE! посмотри как там сделано!

На самом деле всё довольно просто, главное правильно подобрать размеры в css (я подбирал методом тыка, чтобы в 800px умещалось.
<!DOCTYPE html>
<html>
<head>      
    <meta charset="windows-1251">
    <title>Динамическое изменение шаблона новости</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        jQuery(function($) {
             $('.news:nth-child(5n+1)').addClass('big').before('<div class="clr"></div>');    
             $('.news.big:odd').addClass('fright');
        });
    </script>
    <style>    
        body {
            width: 800px;
            margin: 50px auto;
            }
            
        .news {
            width: 188px;
            height: 188px;
            margin: 5px;
            border: solid 1px #ccc;
            float: left;  
            position: relative;
            }
            .news img {
                max-width: 188px;
                max-height: 188px;
                }  
            .news.big img {
                max-width: 388px;
                max-height: 388px;
                }  
            .news.big {
                width: 388px;
                height: 388px;
                }
            .news h2 {              
                margin: 0;
                padding: 10px;
                position: absolute;  
                bottom: 0;
                left: 0;
                right: 0;                
                font: normal 14px/18px Arial, Helvetica, sans-serif;
                color: #323232;
                background: rgba(0,0,0, 0.5)
                }      
    .clr {clear: both; height: 0; overflow: hidden;}        
    .fright {float: right;}
    </style>
</head>

<body>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>
    <div class="news">    
        <h2>Заголовок новости</h2>
        <img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
    </div>  
    <div class="clr"></div>
</body>
</html>

Комментарии пользователей (8)

enterlive
3

83 | 28

enterlive - 5 апреля 2012 14:24 - Юзер

1.Табличную верстку не использую уже лет 5. Оформить это DIV'ами не составляет труда.
2. Тот вариант что ты мне предложил в корни отличается от моего вопроса.
Объясняю:
- когда я захожу на сайт на главной и в категориях должны отображаться табличные новости разных размеров.
- новости должны отображаться в таком порядке 1xBIG + 4xSMALL, снизу наоборот.
при создании новости чтобы я не только выбирал категорию, но и размер новости.

nowheremany
192

1659 | 1292

nowheremany - 5 апреля 2012 16:11 - Эксперт

ПРи создании новости размер указывать полностью бессмысленно, ведь новости двигаются по времени и может получиться что будет 2 большие новости что тогда делать будете?
Единственный вариант JS и CSS. Т.е. искать первую новость ставить стиль Биг, потом за ним 4 - lite и тд.

На стороне сервера не советую этого делать, ведь если использовать разные шаблоны, для главной, для категорий и тп - будет затруднительно. В принципе эта ситуация аналогичная реализации новости в 2-3 колонки. Смотрите в ту сторону

Благодарность принимаю тут Связь

enterlive
3

83 | 28

enterlive - 5 апреля 2012 14:37 - Юзер

Кстати администратор перепутал, это не динамическое изменение, он не правильно указал в заголовке. Это, скорее 2 вида краткой новости в категориях.

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 5 апреля 2012 20:31 - Админ

Нет, я не перепутал, это именно то, о чём вы просите, смотрите ответ. Читый CSS и js - и получаем динамику.

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

rashpil
33

232 | 182

rashpil - 5 апреля 2012 20:24 - Эксперт

При цикле в show.short.php есть переменная $i, котоаря считает количество итераций цикла. Полагаю, что нужно завязывать это с ней. Ибо не люблю исполнения JS, потому что плохо его знаю :) И в пхп уже считать итерации

Borchun
12 | 7

Borchun - 7 апреля 2012 05:12 - Юзер

есть еще такой вариант masonry.desandro.com но он потяжелее будет

enterlive
3

83 | 28

enterlive - 7 апреля 2012 14:58 - Юзер

вот пример podarki.rbkmoney.ru
и сам Google WebStore chrome.google.com/webstore/category/home

Такое реально сделать на DLE переписав PHP модуль show.short.php ?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 7 апреля 2012 15:30 - Админ

В обоих случаях всё сделано средствами css (размеры самих блоков). Только в первом случаи в большом окошке ещё и слайдер.
На гугле вообще всё просто. для определённых элементов просто добавили класс дополнительный и получили большой блок.
В общем модифицировать show.short.php смысла особого не вижу...

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы