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

DownLoad_Free

Салат из разных плагинов для UCOZ сайта

Reload Google_Translater (F5)

Главная » Материалы » Web, scripts
<--Немного места для рекламы-->

Салат из разных плагинов для UCOZ сайта

[ ]	Дата обновления: 3.1.2025
Фотогалерея 1 Scroll_div_code Gallery_code Tabs_code Full_screen_photo Код скролл-бара из вкладки 1 <link type="text/css" href="http://kachay.ucoz.org/salat/scroldiv2.css" rel="stylesheet" media="all"> <style type="text/css"> .mb_content_inner{ line-height:24px; height:268px; outline: none; } .mb_content_inner p{ margin:9px;font-size:14px; line-height:16px; } .text{height:400px;} .mb_content{height:100%;} .mb_content_wrapper1{width:400px;} </style> <div id="mb_content_wrapper" class="mb_content_wrapper1"> <div class="mb_content"> <h2>Заголовок</h2> <div class="mb_content_inner jspScrollable"> <div class="text"> <p>Здесь пишем длинный текст, который будет скролиться</p> </div> </div> </div> </div> <script src="http://kachay.ucoz.org/salat/jquery_003_2.js"></script> <script> var w1=$(document).innerHeight(); var w1=330; </script> <script type="text/javascript"> $(function() { var $mbWrapper = $('#mb_content_wrapper'), $mbContentItems = $mbWrapper.children('.mb_content'), $mbContentInnerItems = $mbContentItems.children('.mb_content_inner'); $works = $('#mb_imagelist > li'), scrooldiv = (function(){ var init = function() { initPlugins(); }, initPlugins = function() { $mbContentInnerItems.jScrollPane({ verticalDragMinHeight: 40, verticalDragMaxHeight: 40 }); }; return { init : init }; })(); scrooldiv.init(); }); </script> Скрипт выравнивает превьюшки изображений, дополняет их до "ровного количества" дублируя изображения + выводит изоражение на весь экран по клику мыши. Код скрипта галереи с увеличением картинки по клику <style type="text/css"> /css отображения картинок/ .carousel { width:550px; overflow: hidden; cursor: pointer; } /* after js / .thumb img { width: 160px; left: -30px !important; top: 0 !important; } .thumb{ float: left; /border:1px solid #ccc;/ width:100px; height:100px; overflow:hidden; margin:3px; opacity:0.95; } .thumb:hover{opacity:1;} #spic{position:fixed;top:0px;left:0px;width:100%;height:0px;background:#444 no-repeat center center;overflow:hidden; z-index:1000;opacity:1;text-align:center;padding:0;} #discr{text-align:center;color:#fff;} #cross{position:absolute;margin:10px;top:0px;right:0px;cursor:pointer;z-index:1001; width:80px;height:80px;background: url(/img14/cross.png) no-repeat center center;outline: none;} </style> <!--html вывода картинки на весь экран--> <div id="spic" onclick="$('#spic').animate({height: '0',padding:'0'}, 500);"> <div id="cross"></div> <div id="spic2"></div> </div> <div class="carousel" style="height:550px;"> <div><img src="http://kachay.ucoz.org/salat/img/i01.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i02.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i03.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i04.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i05.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i06.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i07.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i08.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i09.jpg" /></div> <div><img src="http://kachay.ucoz.org/salat/img/i10.jpg" /></div> </div> <script type="text/javascript"> $(document).ready(function() { $immg=$(".carousel img"); $immg.each(function( i ) { $immg.parent().addClass( 'thumb' ); }); <!--заполняем квадрат картинками клонируя их--> for (a = 0; a < 55-10; a++ ) { var img3=$(".carousel img").eq(a).attr("src"); $('.carousel').append( "<div class='thumb'><img src='"+img3+"' /></div>" ); } <!--выводим увеличенное изображение с учетом его размеров--> $(".carousel img").on( "click", function() { $("#spic2").html("<img src='"+this.src+"' class='imgpic' /><p id='discr'></p>"); var img = new Image(); img.onload = function() { var width1 = this.width; var height1 = this.height; $("#discr").html(width1+""+height1+"_"); $("#spic").show("slow"); if(width1>height1){ $("#spic2 img").css({height: parseInt($( document ).height()0.7,10)+'px'}); $("#spic").animate({height: '100%',paddingTop:'50px'}, 500); } if(width1<height1) { $("#spic2 img").css({height: parseInt($( document ).height()*0.7,10)+'px'}); $("#spic").animate({height: '100%',paddingTop:'10px'}, 500); } } img.src = this.src; }); }); </script> jQuery код внедрения вкладок(tabs) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="http://kachay.ucoz.org/salat/tab1.css" rel="stylesheet"> <script src="http://s21.ucoz.net/src/jquery-1.7.2.js"></script> </head> <body> <div id="tabsholder"> <!--html заголовков вкладок--> <ul class="tabs"> <li id="tab1">Вкладка 1</li> <li id="tab2">Вкладка 2</li> <li id="tab3">Вкладка 3</li> <li id="tab4">Вкладка 4</li> </ul> <!--html содержимого вкладок--> <div class="contents marginbot"> <div id="content1" class="tabscontent"><h3>Вкладка 1</h3></div> <div id="content2" class="tabscontent"><h3>Вкладка 2</h3></div> <div id="content3" class="tabscontent"><h3>Вкладка 3</h3></div> <div id="content4" class="tabscontent"><h3>Вкладка 4</h3></div> </div> <script src="http://kachay.ucoz.org/salat/tab1.js"></script> ... Вывод изображения на весь экран Коды вывода картинки на весь экран <style> .fsp1 { cursor: url(http://kachay.ucoz.org/salat/img/plus_cursor.png) 25 25, pointer; display: inline-block; width: 150px; height: 150px; background-size: cover; background-position: 50% 50%; margin-left: 8px; margin-right: 8px; margin-bottom: 16px; } </style> <script src='http://kachay.ucoz.org/salat/intense.js'></script> <div align="center"> <div class="fsp1" style="background-image:url(http://kachay.ucoz.org/salat/img/i01.jpg)" data-image="http://kachay.ucoz.org/salat/img/i01.jpg" data-title="Титул фото" data-caption="Описание фото 1."></div> <div class="fsp1" style="background-image:url(http://kachay.ucoz.org/salat/img/i02.jpg)" data-image="http://kachay.ucoz.org/salat/img/i02.jpg" data-title="Титул фото" data-caption="Описание фото 2."></div> <div class="fsp1" style="background-image:url(http://kachay.ucoz.org/salat/img/i03.jpg)" data-image="http://kachay.ucoz.org/salat/img/i03.jpg" data-title="Титул фото" data-caption="Описание фото 3."></div> </div> <script> var elements = document.querySelectorAll( '.fsp1' ); Intense( elements ); </script> Проверить в CodePen

Теги материала: scroll, tabs, Gallery, Multi Похожие материалы: Скрипт бесконечной ленты сообщений при скроллинге вниз Категория: Все \| Добавил: anikey99
Просмотров: 2246 \| Загрузок: 0

Полезные дополнения: <--могут быть здесь-->

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Нашли ошибку или
Быстрая форма обратной связи -
жмите Ctr+Enter

Система Orphus

Рекомендуем:
<--что-нибуть здесь-->

Случайные материалы

Фотогалерея с "разлетающимися" картинками. jQuery script

Book Designer v 4.0

Биатлон. Кубок мира 2010-2011. Результаты. Итоги.

Стикеры для сайта в формате CDR

Онлайн журналы на www.zinio.com

Биатлонный конкурс на sports.ru 2014/15

Скрипт голосования за самую красивую женщину мира на Ваш сайт

Monopolia NEW 2.0.44.1807

Конкурс знатоков биатлона 2013/14 на sports.ru. Наши команды.

Маджонг(mahjong) - популярная китайская головоломка онлайн

Фотогалерея с "разлетающимися" картинками. jQuery script

Book Designer v 4.0

Биатлон. Кубок мира 2010-2011. Результаты. Итоги.

Стикеры для сайта в формате CDR

Онлайн журналы на www.zinio.com

Биатлонный конкурс на sports.ru 2014/15

Скрипт голосования за самую красивую женщину мира на Ваш сайт

Monopolia NEW 2.0.44.1807

Конкурс знатоков биатлона 2013/14 на sports.ru. Наши команды.

Маджонг(mahjong) - популярная китайская головоломка онлайн

Copyright kachay.ucoz.org © 2008-2025 | Хостинг от uCoz | wright2webmaster |

^ Наверх ^

Полезно!

Код кнопки