| Сегодня 13 апреля, воскресенье |
      |
  
|
  
Какой рейтинг вас больше интересует?
|
Главная /
Каталог блоговCтраница блогера Хаки и Скрипты Next Generation CMS/Записи в блоге |
 |
Хаки и Скрипты Next Generation CMS
Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888 |
Функциональный JQuery плагин Презентация
2013-12-02 23:46:12 (читать в оригинале)Функциональный JQuery плагин Презентация,тусует картинки ,выглядит классно.
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам innovation.zip (90.88 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном.
2.Сам код меню,это не нумерованный список
Код:
<ul class="contenitore">3.В стили добавляем
<li>Q</li>
<li>U</li>
<li>A</li>
<li>D</li>
<li>R</li>
<li>R</li>
<li>A</li>
<li>T</li>
<li>O</li>
</ul>
Код:
.contenitore{
border: solid 1px #000;
height: 400px;
width: 500px;
background: #FFF;
position: relative;
margin: auto;
padding:0;
}
.contenitore li
{
display: block;
text-align: center;
border: solid 1px #147;
line-height: 135px;
width: 135px;
background: #FFF;
color: #147;
}4.И последнее инициализируем Код:
$('.contenitore').innSlide({
top: '60',
left: '70',
duration: 2000,
interval: 3000,
direction: 'Right'
});Вот параметры которые можно использовать в скрипте- top: (int) верхнее расположение элементов внутреннего контейнера
- left: (int) левое положение элементов внутреннего контейнера
- autoPosition: (bool) вычислить положение внутреннего элемента, true ( default false)
N.B. top and left value where not considered. - duration: (int) длительность эффекта.
N.B. must be less than interval‘s value - interval: (int)интервал времени между слайдами [es, 1000 (1 sec)]
- direction: (string) направление эффект ["Left-Bottom", "Left", "Left-Top", "Top", "Top-Right", "Right", "Right-Bottom", "Bottom"]
Меняем в плагине basket alert на аякс окошко с оформлением
2013-11-30 18:38:11 (читать в оригинале)Вот понадобилось заказчику такое окошко ,пришлось искать замену alert
1.Скачиваем скрипты [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам js.zip (8.03 Kb)[/is-logged] ,распаковываем и заливаем скрипты и стиль в папку js вашего шаблона
2.подключаем скрипты и стиль в хеад main.tpl
Код:
<script src="{{ tpl_url }}/js/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="{{ tpl_url }}/js/jquery.alerts.js" type="text/javascript"></script>
<link href="{{ tpl_url }}/js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />3.Идем /engine/plugins/basket/js и меняем содержимое на этот код Код:
function rpcBasketRequest(method, params) {
var linkTX = new sack();
linkTX.requestFile = '/engine/rpc.php';
linkTX.setVar('json', '1');
linkTX.setVar('methodName', method);
linkTX.setVar('params', json_encode(params));
linkTX.method='POST';
linkTX.onComplete = function() {
linkTX.onHide();
if (linkTX.responseStatus[0] == 200) {
var resTX;
try {
resTX = eval('('+linkTX.response+')');
} catch (err) { jAlert('{l_fmsg.save.json_parse_error} '+linkTX.response); }
// First - check error state
if (!resTX['status']) {
// ERROR. Display it
jAlert('Error ('+resTX['errorCode']+'): '+resTX['errorText']);
} else {
//jAlert('Request complete, answer: '+resTX['data']+'; '+resTX['update']);
jAlert('Товар добавлен в корзину.');
document.getElementById('basketTotalDisplay').innerHTML = resTX['update'];
document.getElementById('basket_'+params['id']).value = '1';
}
} else {
jAlert('{l_fmsg.save.httperror} '+linkTX.responseStatus[0]);
}
}
linkTX.onShow();
linkTX.runAJAX();
}
4.Ну вроде все
Полно экранное слайдшоу
2013-11-29 23:52:46 (читать в оригинале)Красивое полно экранное слайд шоу
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам malihu-jquery-image-gallery.zip (3.08 Mb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем скрипты ,если jquery уже подключен то его подключать не надо.
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>3.В стили добавляем .
<script type="text/javascript" src="{tpl_url}/js/jquery.easing.1.3.js"></script>
Код:
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);3.Между body вставляем сам слайдер
html,body{height:100%;}
body{margin:0px; padding:0px; background:#000; color:#FFFFFF;}
#toolbar{position:fixed; z-index:2; right:10px; top:10px; padding:5px; background:url(../images/fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:2; left:10px; top:10px; padding:10px; background:url(../images/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden;}
#bgimg{display:none;}
#preloader{position:relative; z-index:2; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#outer_container{z-index:2; position:fixed; bottom:0; margin:0; height:170px; padding:40px 5px;}
#thumbScroller{position:relative; overflow:hidden; background:url(../images/fs_img_g_bg.png);}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;}
#thumbScroller .content div{margin:10px; height:100%;}
#thumbScroller img{border:5px solid #fff;}
#thumbScroller a{padding:5px; display:block;}
Код:
<div id="bg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_denebola.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div>
<div id="preloader"><img src="{tpl_url}/images/ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="{tpl_url}/images/toolbar_fs_icon.png" width="50" height="50" /></a></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="{tpl_url}/images/images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_dk.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_albireo.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_church.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_Decampment.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_moons.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_transitorius.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div>
</div>
</div>
</div>4.Теперь перед /body добавляем скрипт инициализации слайд шоу Код:
<script>Вот и все ,смотрим демо
$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg="#bgimg";
$(window).load(function() {
//thumbnail scroller
sliderLeft=$thumbScroller_container.position().left;
padding=$outer_container.css("paddingRight").replace("px", "");
sliderWidth=$(window).width()-padding;
$thumbScroller.css("width",sliderWidth);
var totalContent=0;
fadeSpeed=200;
$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
$this.children().children().children(".thumb").fadeTo(fadeSpeed, 0.6);
});
$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType="easeOutCirc";
if(mouseCoords>destX){
//$thumbScroller_container.css("left",-thePosA); //without easing
$thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
} else if(mouseCoords<destX){
//$thumbScroller_container.css("left",thePosB); //without easing
$thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});
$outer_container.fadeTo(fadeSpeed, 0.8);
$outer_container.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("slow", 0);
}
);
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 0.6);
}
);
//on window resize scale image and reset thumbnail scroller
$(window).resize(function() {
FullScreenBackground($bgimg);
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
var newWidth=$(window).width()-padding;
$thumbScroller.css("width",newWidth);
sliderWidth=newWidth;
});
FullScreenBackground($bgimg); //scale 1st image
});
$($bgimg).load(function() {
$preloader.fadeOut("fast"); //hide preloader
var $this=$(this);
$this.removeAttr("width").removeAttr("height").css({ width: "", height: "" });
FullScreenBackground($this);
var imageTitle=$("#img_title").data("imageTitle");
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$("#img_title").html(imageTitle);
} else {
$("#img_title").html($(this).attr("title"));
}
$this.fadeIn("slow"); //fadein background image
});
//mouseover toolbar
$toolbar.fadeTo("fast", 0.4);
$toolbar.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("fast", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("fast", 0.4);
}
);
//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
event.preventDefault();
$preloader.fadeIn("fast"); //show preloader
var $this=$(this);
var title_attr=$this.children("img").attr("title"); //get image title attribute
$("#img_title").data("imageTitle", title_attr); //store image title
$($bgimg).css("display","none").attr("src", this); //change image source
});
//Image scale function
function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
} else { //normal size image mode
if ((winHeight / winWidth) > picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
}
$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
}
//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
$toolbar.data("imageViewMode", theMode);
FullScreenBackground($bgimg);
if(theMode=="full"){
$toolbar_a.html("<img src='{tpl_url}/images/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='{tpl_url}/images/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
}
</script>
FerroMenu JQuery плагин
2013-11-27 01:34:02 (читать в оригинале)FerroMenu позволяет:
-Положение меню в одном из 9 опорных точек экрана: верхний левый, верхний-центр, топ-правый, центральный налево, центрально-центр, центр-правый, нижний левый, нижний-центр, нижний правый двигать меню, просто перетаскивая его по экрану. По окончании перетаскивания, меню будет позиционировать себя в ближайшей точке крепления
-настроить меню аспект просто изменив это CSS
-настроить переходы установки их продолжительность, ослабление, задержку из пунктов меню, угол поворота для открывания / закрывания действия, маржу от краев окна просмотра, радиус (т.е. расстояние из пунктов от контроллера)
элементы из меню будет изменен после каждого движения, основываясь на места, доступного по меню.
eneable / выключение перетаскивания функция
инкапсулировать скользящие содержимое в контейнере;
Исходник скачать [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам ferromenu-1_1.zip (282.18 Kb)[/is-logged]
Установка
1.Подключаем скрипты и стили
Код:
<link rel="stylesheet" href="{tpl_url}/css/jquery.ferro.ferroMenu.css" type="text/css">
<script src="{tpl_url}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.ferro.ferroMenu-1.1.min.js" type="text/javascript"></script>2. Сам HTML код меню
Код:
<ul id="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>
3.Инициализация по умолчанию
Код:
$(document).ready(function() {
$('#nav').ferroMenu();
});Инициализация с параметрамиКод:
$(document).ready(function() {
$("#nav").ferroMenu({
position : "left-center",
delay : 50,
rotation : 720,
margin : 20
});
});Читайте Опции раздел для более глубокого объяснения пользовательских параметров. Опции
Доступные параметры для этого плагина:
| Параметр | Доступные значения | Значение по умолчанию | Описание |
|---|---|---|---|
| closeTime | число | 500 | Меню colsing скорость времени в миллисекундах |
| delay | число | 0 | пунктов "анимация отправной задержка в миллисекундах |
| drag | True | False | правда | включить / выключить меню перетаскивания вокруг экрана |
| easing | строка | кубических Безье (0,680, -0,550, 0,265, 1,550) | анимация ослабление. Вы можете использовать каждый HTML5-совместимые easings |
| margin | число | 10 | Рентабельность меню в пикселях от краев окна просмотра |
| position | "Левый-топ '|' центр-топ '|' правую верхнюю '|' правый нижний '|' центр дном '|' левой нижней '|' правой кнопкой центр '|' левом центре '|' центр -центр " | 'Левой нижней' | Начальное положение в меню в одном из 9 опорных точек |
| radius | число | 100 | радиус в пикселях пунктов расстоянии от контроллера меню |
| rotation | число | 0 | поворота в градусах, выполняемых пунктов меню на открытие / закрытие |
| opened | True | False | ложный | начальное состояние меню: если
<font><font>верно</font></font>
меню открыто, в противном случае (по умолчанию) закрыт |
| openTime | число | 500 | Меню открытия скорость времени в миллисекундах |
Общественные функции
FerroMenu предоставляет только один открытый метод, который можно назвать извне:
| Функция | Параметр | Описание |
|---|---|---|
| $. Fn.ferroSlider.toggleMenu () | - | открыть / закрыть меню |
События
FerroMenu предоставляет некоторые пользовательские события:
menuready : срабатывает в конце инициализации меню;
menuopened : срабатывает, когда меню открыто;
menuclosed : срабатывает, когда меню закрыто;
menudragstart : срабатывает на дрэг-начале меню;
menudrag : срабатывает во время увлечения меню;
menudragend : срабатывает на конце лобового сопротивления меню;
Эти события добавить объект, называемый menustatus к JQuery $ событий. объекта, который имеет два простых информацию:
позиция : позиция меню в одном из 9 опорных точек;
открыл : верно , если меню открыто, ложь в противном случае;
Чтобы поймать этого события, вы можете сделать так:
Код:
$(document).ready(function() {
$(document).on("menuready",function(){
//do stuff
});
$(document).on("menuopened",function(){
//do stuff
});
$(document).on("menuclosed",function(){
//do stuff
});
$(document).on("menudragstart",function(){
//do stuff
});
$(document).on("menudrag",function(){
//do stuff
});
$(document).on("menudragend",function(){
//do stuff
});
});
Если новость обрезается
2013-11-23 19:18:29 (читать в оригинале)Бывает что нужно добавить статью ,очень большую статью порядка 100000 знаков,но вот беда по умолчанию текст обрезается,и сегодня я расскажу как увеличить лимит.
Приступим,
1. идем в phpMyAdmin и там в базе находим таблицу ng_news и меняем тип на MEDIUMTEXT
2. открываем файл templater.class.php и там примерно после 114 строки добавляем
Код:
ini_set('pcre.backtrack_limit',10000000);сохраняем ,все ,добавляем большие тексты
Категория «Истории»
Взлеты Топ 5
 | ||
|
+1920 |
1940 |
Дрочливый_Драчун |
|
+1899 |
1946 |
Коптящий_Небо |
|
+1891 |
1957 |
Da_Queen_of_Da_World |
|
+1873 |
1964 |
Splash_Phantom |
|
+1754 |
1777 |
jolly_M |
Падения Топ 5
 | ||
|
-1 |
1270 |
Выдающиеся женщины |
|
-1 |
829 |
Работа в интернете |
|
-1 |
1180 |
Вкусное меню |
|
-2 |
1062 |
TradeIP |
|
-2 |
84 |
xpyctal |
Популярные за сутки
Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.
взяты из открытых общедоступных источников и являются собственностью их авторов.