Переключение шаблонов shortstory для DLE

Переключение шаблонов shortstory

Переключение шаблонов shortstory

На многих сайтах, в частности каталогах, встречается функция смены оформления коротких новостей, например: списком, маленькими иконками, большими иконками и т.п.
В DLE такой опции нету, возможно будет добавлена, но пока постараемся обойтись простым методом на JS и костылях :)
Суть метода заключается в том, что выводятся сразу все варианты оформления новости, но не нужные скрытые в display:none;
Для работы нам понадобится дополнительно подключить только плагин jQuery Cookie, чтобы запоминать выбранный тип оформления при переходе по страницам навигации.
Плюсы:
  • [+] Простая установка
  • [+] Быстрота работы


Минусы:
  • [-]Пока страница не загрузится будет отображаться первый тип шаблона
  • [-]Большой вес страницы, много скрытого не используемого текста


Вот примерно так и будет выглядеть нижеописанное:
Переключение шаблонов shortstory
Переключение шаблонов shortstory


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

CSS:
.templater .current{color:#c00;}
.templtes{display:none;}
.templtes.current{display:block;}


javascript:
$(function(){
	if($.cookie('short_template')){
		$(".templtes").removeClass('current');
		$(".templater a[data-template]").removeClass('current').each(function(){
			if($(this).data('template')==$.cookie('short_template')){
				$(this).addClass('current');
				$(".template-"+$.cookie('short_template')).addClass('current');
			}
		});
	}
	$(".templater a[data-template]").click(function(){
		if($(this).hasClass('current')) return false;
		$(this).addClass('current').siblings().removeClass('current');
		$(".templtes").removeClass('current');
		$(".template-"+$(this).data('template')).addClass('current');
		$.cookie('short_template', $(this).data('template'),{path:'/'});
		return false;
	});
})

Не забудьте подключить jquery.cookie.js

Шаблон формы переключений:
<div class="templater">Режим просмотра: <a href="#" class="current" data-template="default">Стандарт</a> |  <a href="#" data-template="list">Список</a> | <a href="#" data-template="icons">Иконки</a></div>


И шаблон короткой новости:
<div class="templtes template-default current">
 Первый шаблон, я оставил стандартный
</div>
<div class="templtes template-list">
 Второй шаблон, в виде списка
</div>
<div class="templtes template-icons" style="float:left;width:25%;">
 Третий шаблон, в виде иконок, по 4 в ряд.
</div>


С Уважением,
Олег Александрович a.k.a. Sander
Комментарии: (12)
  1. foto
    Администратор 21 августа 2013 20:36 #
    Основной этап работ уже завершен, скоро сделаю регистрацию и прочие плюшки :)
    +9
    1. foto
      VIP 22 августа 2013 10:52 #
      Отлично, осталось запретить юзерам стирать комменты, убрать FP и наладить Ctrl+Enter
      +3
  2. foto
    Посетитель 18 сентября 2013 20:31 #
    идея хорошая, но минусы очень серьезные,

    к ним еще причисли СЕО вред, не только из за повторяющегося текста, ссылок, но еще и из за большего размера страницы.
    0
  3. foto
    Посетитель 22 сентября 2013 07:31 #
    Цитата: shamanim
    СЕО вред

    Согласен...
    0
  4. foto
    Посетитель 21 февраля 2015 12:43 #
    Здравствуйте, пожалуйста напишите как заставить работать с доп полями
    0
    1. foto
      Администратор 21 февраля 2015 17:28 #
      Этот хак не предназначен для работы с доп. полями. Он их ни коим образом не касается и не мешает их работе. Выводите их так же как и в обычном шаблоне.
      0
  5. foto
    Посетитель 22 февраля 2015 04:34 #
    Цитата: Sander
    Этот хак не предназначен для работы с доп. полями. Он их ни коим образом не касается и не мешает их работе. Выводите их так же как и в обычном шаблоне.

    т.е я допустил когдато ошибку в установке? у меня при смене вида кратких новостей, выводит: если скачка: то [attachment=3], а если картинка тогда белый фон. так и должно быть или ошибку в установке допустил?
    0
  6. foto
    Посетитель 22 февраля 2015 04:35 #
    Если перезагружаю страницу все отображается нормально
    0
  7. foto
    Посетитель 22 февраля 2015 05:07 #
    пожалуйста напишите как правильнее всего сделать?
    использовать ваш вариант или
    2 вариант
    0
  8. foto
    Посетитель 11 апреля 2015 12:48 #
    не работает на 10.4,
    пожалуйста напишите где скачать чистую чистейшую, как попка младенца, дле 10.4
    не 10.3 как на офф сайте,а именно 10.4 т.е последнюю?
    и почему не работает на 10.4 этот переключателЬ?
    0
  9. foto
    Посетитель 15 июля 2017 13:03 #
    Доброго времени суток! Всё поставил всё работает на ура, большое спасибо!
    У меня стоит AJAX подгрузка страниц LiveLoad
    И я столкнулся с проблемой:
    1) при переходе в категорию не выводятся новости
    2) если выбрать ИКОНКИ и нажать кнопку подгрузить ещё новость то подгружаются новости в стандарте
    У меня стоит дле 11.1.
    Помогите подправить буду весьма благодарен.
    Спасибо!
    0
  10. foto
    Посетитель 15 июля 2017 13:41 #
    Цитата: GASTROLYOR
    Доброго времени суток! Всё поставил всё работает на ура, большое спасибо!
    У меня стоит AJAX подгрузка страниц LiveLoad
    И я столкнулся с проблемой:
    1) при переходе в категорию не выводятся новости
    2) если выбрать ИКОНКИ и нажать кнопку подгрузить ещё новость то подгружаются новости в стандарте
    У меня стоит дле 11.1.
    Помогите подправить буду весьма благодарен.
    Спасибо!

    Или же вот ещё есть простое решение автоподгрузки новостей но я понятие не имею что тут править помогите пожалуйста!!!
    <div id="ajax-next-page" style="display: none;">[next-link][/next-link]</div>
    <script type="text/javascript">
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > $('body').height()-$(window).height()-10) {
                    var nextPage = $('#ajax-next-page a').attr('href');
                    if (nextPage !== undefined) {
                        $.ajax({
                            url: nextPage,
                            success: function(data) {
                                $('#ajax-next-page').remove();
                                $('#dle-content').append($('#dle-content', data).html());
                            }
                        })
                    }
                }
            });
        });
    </script>

    Подгружает стандарт при выборе иконки...
    0
Добавить комментарий
  • Логин
  • E-mail
Повторите рисунок:
antibot
© Sander-Development. 2009-2018.
При копировании, ссылка на источник обязательна.