Умная всплывалка с картинкой

function getXY(e) { //Определяем положение всплывалки на странице
 if($(window).width() - (offset *2) >= $("#preview").width() + e.pageX){
 left_pos = e.pageX+offset;
 } else {
 left_pos = e.pageX-$("#preview").width()-offset;
 } 
 top_pos = e.pageY - ($("#preview").height() / 2); 
 return {left: left_pos, top: top_pos};
}

$("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
 pos = getXY(e);

function imagePreview(targets){
 offset = 15;
 var left_pos;

 $(targets).hover(function(e){
 $("body").append("<p id='preview'><img src='"+ $(this).data("image") +"' alt='"+$(this).attr("alt")+"' /></p>"); //Добавляем блок в конец body - именно в него будет "вставляться" наша картинка, для выбора картинки используем html5 атрибут data-
 pos = getXY(e); 
 
 $("#preview").css({left:pos.left, top:pos.top}); 
 
 $("#preview").fadeIn(); 
 },
 function(){ 
 $("#preview").remove();
 });

 $(targets).mousemove(function(e){
 pos = getXY(e); 
 $("#preview").css({left:pos.left, top:pos.top});
 });
}

$(document).ready(function(){ //Инициализация скрипта.
 imagePreview(".miniatures img"); 
});

Первый сниппет добавит собственный фильтр (:random) для отбора элементов

//Добавляем собственный фильтр (по аналогии с псевдоклассами css)

var random = 0;
$.expr[':'].random = function(a, i, m, r) {
 if (i == 0) {
 random = Math.floor(Math.random() * r.length);
 }
 return i == random;
};

// Используем созданный фильтр
$('.random-block:random').addClass('show-random');

Второй сниппет для разворачивания и сворачивания блока с запоминанием положения cookies

<div class="poll">
 <h2><a href="#" title="Свернуть/развернуть опрос">Опрос</a></h2>
 <div class="vote-show">
 скрываемый контент, например опрос на сайте
 <label><input type="radio"> вопрос 1</label>
 <label><input type="radio"> вопрос 2</label>
 <label><input type="radio"> вопрос 3</label>
 </div>
</div> <!-- .poll -->

.vote-show {
 display: none;
 }
.poll.show .vote-show {
 display: block;
 }

//Работаем с куками

$(".poll").addClass($.cookie("show_poll")); //Добавляем класс элементу на основе значения cookie

$(".poll h2 a").click(function () { 
 if($.cookie("show_poll")=="hide") { //Если блок скрыт - показываем
 $.cookie("show_poll","show"); //назначаем куки
 $(".poll .vote-show").slideDown(500, function(){ //функция для плавного показа блока и назначения класса с display: block
 $(".poll").removeClass("show, hide").addClass($.cookie("show_poll"));
 });
 } 
 else { //иначе - скрываем
 $.cookie("show_poll",'hide'); //переназначаем куки
 $(".poll .vote-show").slideUp(500, function(){ //функция для плавного показа блока и удаления класса с display: block
 $(".poll").removeClass("show, hide").addClass($.cookie("show_poll"));
 });
 } 
 return false;
});

Первый сниппет - для отлавливания хеша из адресной строки

$(window).load(function () {
 thisLinkId = window.location.hash; //получаем хэш из адресной строки 
 $(thisLinkId).trigger("click"); //эмулируем клик по соответствующему ID
});

Второй сниппет - простая стилизация input type="file"

<div class="custom-form" id="show">
 <h3>Демонстрация стилизованного инпута</h3>
 <form method="post" action="noaction">
 <p>
 <textarea>тут текст сообщения</textarea>
 </p>
 <p>
 вот он, стилизованный input type="file"
 </p>
 <p>
 <input type="file" />
 </p>
 </form>
</div>

$(".custom-form input[type='file']").addClass("remove").parent().addClass("custom-file"); //убираем стандартный инпут и добавляем родительскому блоку класс

$(".custom-file").append('<input type="text" id="file-input" /><a href="#" id="file-but">Обзор</a>'); //вставляем html-код для кастомизации инпута

$("#file-but, #file-input").on("click", function(){ //навешиваем клик на форму input для вызова формы загрузки файла
 $(".custom-form input[type='file']").trigger("click");
 return false;
});

$(".custom-form input[type='file']").change(function () { //получаем значение value из инпута
 fileval(this.value);
}).change();

$("body").mousemove( function(){ // Защита от дибилов, чтоб не пытались менять выводимое значение.
 $("#file-input").attr("value", filevalF[filevalF.length -1]); //берём последнюю строку из массива, чтобы не было видно fakepath.
});

Продолжение следует...

Для чего это нужно?

Как сделать?

1. Потребуются:
   - Плагин jquery.cookie.js (для лёгкой и непринуждённой работы с куками)
   - Прямые руки.
   
2. Конечно же главное - это js. Поэтому сразу привожу код:
   

    $(".comment").addClass($.cookie("small_comments"));
    
    $(".compact-mode").click(function () { 
    $.cookie("small_comments", "small"); 
    $(".comment").removeClass("normal").removeClass("small").addClass($.cookie("small_comments"));
    return false;
    });
   
    $(".normal-mode").click(function () { 
    //comCook.text=""; 
    $.cookie("small_comments", "normal"); 
    $(".comment").removeClass("normal").removeClass("small").addClass($.cookie("small_comments"));
    return false;
    });

   
   Где $.cookie("small_comments") - это имя переменной, в которой будут записываться cookies, что бы при повторном обращении к странице пользователь видел выбранное представление комментариев.
   Суть в следующем:
   - При загрузке страницы всем блокам с классом comment присваивается класс с именем значения cookies (если пользователь зашёл на сайт первый раз, то ничего не добавится и ничего не поменяется).
   - При клике на ссылку с классом compact-mode в куки записывается значение "small" и это же значение присваивается ко всем блокам comment
   - При клике на ссылку с классом normal-mode в куки записывается значение "normal" и это же значение присваивается ко всем блокам comment
   - Проще некуда.
   
3. Осталось подточить немного стили.
   Если сократить, то таблица стилей выглядит вот так:
   

   .comment {...}
    .comment.small {...}
    .inner {...}
    .small .inner {...}

   
   Т.е. мы просто добавили в тех местах, где это необходимо модификатор в виде класса small, тем самым изменили внешний вид комментариев.
   
4. Вот и всё. Скачать и посмотреть демо можно ниже.
   

Итак

//Карусель
function mycarousel_initCallback(carousel)
{
 carousel.clip.hover(function() {
 carousel.stopAuto();
 }, function() {
 carousel.startAuto();
 });
};

$(function() {
 jQuery('#bp_slider').jcarousel({
 wrap: 'circular',
 auto: 5, //интервал прокрутки в секундах
 scroll: 1, //кол-во элементов, прокручиваемых за один раз
 animation: 500, //скорость прокрутки
 initCallback: mycarousel_initCallback //вызов функции остановки прокрутки при наведении мышки
 });
});

<li class="bp_item">
 <strong><a href="{full-link}" title="{title}">{title limit="30"}</a></strong>
 <div class="bp_item_img"><img src="{image-1}" alt="{title}" width="50" height="50" /></div>
 <div class="bp_item_text">{text limit="70"}</div>
</li>

<script type="text/javascript" src="{THEME}/js/libs.js"></script>

<script type="text/javascript" src="{THEME}/js/jquery.jcarousel.min.js"></script>

<div id="popular" class="block">
 <div class="dtop">&nbsp;</div>
 <div class="dcont">
 <div class="btl">
 <h4>Популярные статьи</h4>
 </div>
 <ul>
 {topnews}
 </ul>
 </div>
 <div class="dbtm">&nbsp;</div>
</div>

<div class="block">
 <div class="dtop">&nbsp;</div>
 <div class="dcont">
 <div class="btl">
 <h4>Карусель + Block.Pro.2</h4>
 </div>
 <ul id="bp_slider">
 {include file="engine/modules/block.pro.2.php?&block_id=carousel&template=bp_carousel&news_num=6&last=y&img_size=50x50"}
 </ul>
 </div>
 <div class="dbtm">&nbsp;</div>
</div>

/*Carousel
-----------------------------------------------------------------------------*/
#bp_slider {
 max-height: 100px; 
 }
#bp_slider .bp_item {
 font-size: 12px;
 width: 230px;
 }
#bp_slider .bp_item strong {
 display: block;
 }
 #bp_slider .bp_item a {
 text-decoration: none;
 } 
 #bp_slider .bp_item a:hover {
 text-decoration: underline;
 color: #9966cc;
 }
 #bp_slider .bp_item_img {
 float: left;
 padding: 3px 5px 0 0;
 }

.jcarousel-clip {
 overflow: hidden; 
 margin-top: 10px;
 }

.jcarousel-container {
 width: 230px; 
 margin-left: 15px;
 } 
/**
 * Horizontal Buttons
 */
.jcarousel-next-horizontal {
 position: absolute;
 bottom: -10px;
 right: -14px;
 width: 23px;
 height: 23px;
 cursor: pointer;
 background: url(../images/basenavi.png) no-repeat -26px -32px;
 }

.jcarousel-next-horizontal:hover {
 background: url(../images/basenavi.png) no-repeat -26px -61px;
 } 
.jcarousel-next-horizontal:active {
 background: url(../images/basenavi.png) no-repeat -26px -90px;
 }
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover {
 cursor: default;
 }

.jcarousel-prev-horizontal {
 position: absolute;
 bottom: -10px;
 right: 9px;
 width: 23px;
 height: 23px;
 cursor: pointer;
 background: url(../images/basenavi.png) no-repeat -3px -32px;
 }

.jcarousel-prev-horizontal:hover {
 background: url(../images/basenavi.png) no-repeat -3px -61px;
 } 
.jcarousel-prev-horizontal:active {
 background: url(../images/basenavi.png) no-repeat -3px -90px;
 }
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:focus,
.jcarousel-prev-disabled-horizontal:active {
 cursor: default;
 } 

Инструкция

[aviable=showfull]
<link rel="stylesheet" href="{THEME}/style/markitup.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="{THEME}/js/markitup.js" ></script>
<script type="text/javascript" src="{THEME}/js/mk_set.js" ></script>
<script type="text/javascript" >
$(document).ready(function() {
 $('textarea.forbbcode').click(function() {
 if ($("textarea.forbbcode.markItUpEditor").length === 1) {
 return false;
 } else {
 $(this).markItUp(BbcodeSettings).value = "";
 }
 return false;
 });
});
</script>
[/aviable]

<textarea name="comments" class="forbbcode" id="comments" cols="" rows="" onclick="setNewField(this.name, document.getElementById( 'dle-comments-form' ))"></textarea>
<p><input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1" />Подписаться на комментарии</p>

Как настроить?

.bb_button.bold {background-image: url(../bbcodes/new/bold.png);}

{name:'Жирный', openWith:'[b]', closeWith:'[/b]', className:"bold"},

Итак

Теперь перейдем к разбору кода.

<div class="comments" id="fornocomments">
 {comments}
</div>

<div id="comment-id-100">Комментарий номер 100</div>

$(function(){ 
var comments_block = $("#fornocomments");
if (comments_block.find("div[id*=comment-id-]").first().text() == "") {comments_block.prepend('<div class="nocomments">Комментариев пока нет</div>');}
}); 

var comments_block = $("#fornocomments");

if (comments_block.find("div[id*=comment-id-]").first().text() == "") 

comments_block.prepend('<div class="nocomments">Комментариев пока нет</div>');