Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Как поменять вид нумерации страниц тем?автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28
Popup-окно "Возможно Вас заинтересует"
Страница 1 из 1
Popup-окно "Возможно Вас заинтересует"
Ставить нужно в низ шаблона viewtopic_body :
Если нужно разместить попуп-окно слева, то этот код :
Результат :
Скрипт загружает картинки-иконки тем. Как работает, не тестировал. Кажется, надо устанавливать картинки для тем отдельно.
Кто будет тестировать, просьба отписаться в этой теме.
Спасибо.
- Код:
<div class='show' id='slidebox'><div class='slidebox-title slidebox-www'><span style='float:left;margin:0 15px;'>Возможно Вас заинтересует</span><span><a href='javascript:void(0);' id='slidebox-close' title='close'>×</a></span><span><a href='javascript:void(0);' id='slidebox-minimize' title='minimize'>−</a></span><span><a href='javascript:void(0);' id='slidebox-maximize' title='maximize'>+</a></span></div><div class='slidebox-container'><ul class='related-post-style-2' id='sliding-tab'/></div></div>
<style>
/* Widget Recommended Content */
#slidebox{background:#fff;width:100%;max-width:355px;height:255px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.slidebox-title{background:#3a5795;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.slidebox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#slidebox-close,a#slidebox-close{margin-right:15px}
.slidebox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.slidebox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.slidebox-container >div{border:none;margin:3px 0;padding:10px 0}
.slidebox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-205px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{padding-top:5px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail img {width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:110%;line-height:normal}
a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
</style>
<script type="text/javascript">
$(window).scroll(function() {
$("#slidebox").css($(this).scrollTop() > 700 ? {
right: "0px"
} : {
right: "-360px"
});
}), $(document).ready(function() {
var i = $("#slidebox"),
s = $("#slidebox-close"),
o = $("#slidebox-minimize"),
l = $("#slidebox-maximize");
l.hide(), s.click(function() {
i.css({
right: "-350px"
}), i.fadeOut("slow")
}), o.click(function() {
i.toggleClass("hide"), $(this).hide(), l.show()
}), l.click(function() {
i.toggleClass("hide"), $(this).hide(), o.show()
})
});
</script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "/feed/?f={FORUM_ID}",
success: function (ta) {
for (var i = 1; i < 5; i++) {
var DL = $(ta).find("link:eq(" + i + ")").text();
var title = $(ta).find("title:eq(" + i + ")").text();
$('<li><div class="news-item"><div><div class="related-post-style-2"><div class="crop"><a href="' + DL + '" class="related-post-item-thumbnail" rel="bookmark"></a></div><span></span><div style="clear: both;"></div></div></div></div></li>').appendTo('#sliding-tab');
$('<a class="related-post-item-title" href="' + DL + '">' + title + '</a>').appendTo('.news-item:eq(' + (i - 2) + ') .related-post-style-2 span');
$('<img src="' + $(".news-item:eq(" + (i - 2) + ") .crop a:eq(0)").load(DL + ".postbody .messageContent img:eq(0)") + '" alt="Загрузка.." />').appendTo('.news-item:eq(' + (i - 2) + ') .crop a:eq(0)');
}
}
});
});
</script>
Если нужно разместить попуп-окно слева, то этот код :
- Код:
<div class='show' id='slidebox'><div class='slidebox-title slidebox-www'><span style='float:left;margin:0 15px;'>Возможно Вас заинтересует</span><span><a href='javascript:void(0);' id='slidebox-close' title='close'>×</a></span><span><a href='javascript:void(0);' id='slidebox-minimize' title='minimize'>−</a></span><span><a href='javascript:void(0);' id='slidebox-maximize' title='maximize'>+</a></span></div><div class='slidebox-container'><ul class='related-post-style-2' id='sliding-tab'/></div></div>
<style>
/* Widget Recommended Content */
#slidebox{background:#fff;width:100%;max-width:355px;height:255px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.slidebox-title{background:#3a5795;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.slidebox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#slidebox-close,a#slidebox-close{margin-right:15px}
.slidebox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.slidebox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.slidebox-container >div{border:none;margin:3px 0;padding:10px 0}
.slidebox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-205px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{padding-top:5px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail img {width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:110%;line-height:normal}
a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
</style>
<script type="text/javascript">
$(window).scroll(function() {
$("#slidebox").css($(this).scrollTop() > 700 ? {
left: "0px"
} : {
left: "-360px"
});
}), $(document).ready(function() {
var i = $("#slidebox"),
s = $("#slidebox-close"),
o = $("#slidebox-minimize"),
l = $("#slidebox-maximize");
l.hide(), s.click(function() {
i.css({
left: "-350px"
}), i.fadeOut("slow")
}), o.click(function() {
i.toggleClass("hide"), $(this).hide(), l.show()
}), l.click(function() {
i.toggleClass("hide"), $(this).hide(), o.show()
})
});
</script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "/feed/?f={FORUM_ID}",
success: function (ta) {
for (var i = 1; i < 5; i++) {
var DL = $(ta).find("link:eq(" + i + ")").text();
var title = $(ta).find("title:eq(" + i + ")").text();
$('<li><div class="news-item"><div><div class="related-post-style-2"><div class="crop"><a href="' + DL + '" class="related-post-item-thumbnail" rel="bookmark"></a></div><span></span><div style="clear: both;"></div></div></div></div></li>').appendTo('#sliding-tab');
$('<a class="related-post-item-title" href="' + DL + '">' + title + '</a>').appendTo('.news-item:eq(' + (i - 2) + ') .related-post-style-2 span');
$('<img src="' + $(".news-item:eq(" + (i - 2) + ") .crop a:eq(0)").load(DL + ".postbody .messageContent img:eq(0)") + '" alt="Загрузка.." />').appendTo('.news-item:eq(' + (i - 2) + ') .crop a:eq(0)');
}
}
});
});
</script>
Результат :
Скрипт загружает картинки-иконки тем. Как работает, не тестировал. Кажется, надо устанавливать картинки для тем отдельно.
Кто будет тестировать, просьба отписаться в этой теме.
Спасибо.
Лилэя поставил(а) лайк
Похожие темы
» popup окно
» popup окно
» Делаем красивое popup окно [punBB] [phpBB2]
» Делаем красивое popup окно
» Не вижу popup окно в опере
» popup окно
» Делаем красивое popup окно [punBB] [phpBB2]
» Делаем красивое popup окно
» Не вижу popup окно в опере
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения