Проба видео
<p><a class="aligncenter" href="http://4x4pohod.ru/uploads/tehnichka/dsc06054.jpg"><img style="-webkit-user-select: none; max-width: 200%;" src="http://4x4pohod.ru/uploads/tehnichka/dsc06054.jpg" alt="" width="260" height="200" hspace="2" vspace="5" /></a></p>
картинку загружать в "Загрузки", сняв галку "для изображений изменить размер до", картинку грузить не
уменьшая размер в пикселях (не менее 1200 на сторону).
http://4x4pohod.ru/uploads/tehnichka/dsc06054.jpg картинка, которую надо увеличивать
200% на сколько процентов увеличивать
Отмена правого клика на странице
<script type="text/javascript" language="JavaScript">// <![CDATA[
if (document.all) {
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEDOWN)
}
else if (document.layers) {
document.captureEvents(Event.MOUSEDOWN)
}
document.onmousedown = mousedown_handler
function mousedown_handler(mouse_event) {
// This is the message that will appear
var no_right_click = "Извините, но правый клик на этой странице отключен!"
if (document.all) {
//Probably Internet Explorer 4 and later
if (event.button == 2 || event.button == 3) {
alert(no_right_click)
return false
}
}
else if (document.getElementById) {
// Probably Netscape 6 and later
if (mouse_event.which == 3) {
alert(no_right_click)
return false
}
}
else if (document.layers) {
// Probably Netscape 4
if (mouse_event.which == 3) {
alert(no_right_click)
return false
}
}
}
// ]]></script>
Для того, чтобы получить на своем сайте слайдшоу, вставьте в начало Вашей странички следующий JavaScript код:
<script type="text/javascript">
all_images = new Array (
"image/img_1.png",
"image/img_2.png",
"image/img_3.png",
"image/img_4.png");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 2500;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>
Далее в том месте Вашей странички, где Вы планируете разместить изображения, которые будут автоматически меняться, добавите следующий код:
<div align="center">
<table border="0">
<tr align="center">
<td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
</tr>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
<td align="center"><a href="javascript:auto()">Старт/Стоп</a></td>
<td align="left"><a href="javascript:chgImg(1)">Следующая</a></td>
</tr>
</table>
</div>
После этого остается только запустить ранее описанную функцию смены изображений. Делается это следующим образом:
<script type="text/javascript">
auto();
</script>
Скрипт слайдера, спрятанного под спойлер
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
Далее необходимо будет разместить код заголовков спойлеров и тела спойлера для отображения и скрытия слайдера:
<div align="center">
<div class="sp_links" id="sp_0">Слайдер №1</div>
<div class="sp_links" id="sp_1">Слайдер №2</div>
<div class="sp_links" id="sp_2">Слайдер №3</div>
</div>
<div id="body">
<table align="center">
<tr>
<td id="show_back"><b><<<</b></td>
<td id="slide_show"></td>
<td id="show_forward"><b>>>></b></td>
</tr>
</table>
</div>
Так же не забываем в шапку сайта между тегами <head> и </head> добавить стили для правильного отображения и работы слайдера и спойлеров:
<style type="text/css">
#body { display:none; font-style:italic; }
#show_back, #show_forward, .sp_links { cursor:pointer; }
.sp_links { display:inline-block; width:200px; margin:5px; border-radius:7px;
text-align:center; font-weight:bold; color:#0000FF; border:1px solid #808080; }
.selected { background-color:#CCCCCC; }
</style>
Теперь остается добавить JavaScript код, который будет показывать и скрывать содержимое спойлера при кликах по заголовкам, а так же отвечающий за работу слайдера:
<script type="text/javascript">
$(document).ready(function(){
time=400;
num=[0,0,0];
imgs=[
["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"],
["image/img_1.png","image/img_2.png","image/Banner2.png","image/Banner3.png",
"image/Banner4.png"],
["image/Banner2.png","image/Banner3.png","image/Banner4.png"]
];
$('#show_back').click(function() { num[id]--; });
$('#show_forward').click(function() { num[id]++; });
$('#show_back, #show_forward').click(function() {
if (num[id]<0) num[id]=imgs[id].length-1;
if (num[id]>=imgs[id].length) num[id]=0;
$('#img_show').fadeOut(time, function() {
$(this).attr('src', imgs[id][num[id]]).fadeIn(time);
});
});
$('.sp_links').click(function() {
id=$(this).attr("id").substr(3);
if ($(this).hasClass("selected")!=true) {
$('#body').fadeOut(time, function() {
$('#slide_show').html('<img src="'+imgs[id][num[id]]+'" alt="" id="img_show">');
}).fadeIn(time);
$('.sp_links').removeClass('selected');
$(this).addClass('selected');
}
else {
$('.sp_links').removeClass('selected');
$('#body').fadeOut(time);
}
return false;
});
});
</script>
Поясним пару важных моментов по данному скрипту. В num=[0,0,0]; хранятся номера изображений в массиве с которых начнется просмотр для каждого спойлера в отдельности.
Т.е. запись num=[0,2,0]; означает, что для второго спойлера просмотр изображений начнется с изображения под номером 3 в массиве изображений (т.к. отсчет начинается с 0).
imgs является двумерным массивом с адресами изображений.
При желании слайдер изображений можно будет заменить на слайдер html страничек. Таким образом возможно будет реализовать слайдер не только изображений, но и любого другого содержимого html страничек.
Смена изображения при клике по ссылке
Для того, чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.
Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.
Для получения такого эффекта "смены" изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:
<script type="text/javascript">
function l_image (a) {
document.example_img.src=a
}
</script>
В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="center">
<td width="350" height="200">
<a href="javascript:l_image ('image/img_1.png')">Ссылка на изображение №1</a><br>
<a href="javascript:l_image ('image/img_2.png')">Ссылка на изображение №2</a><br>
<a href="javascript:l_image ('image/img_3.png')">Ссылка на изображение №3</a><br>
<a href="javascript:l_image ('image/img_4.png')">Ссылка на изображение №4</a><br>
</td>
<td width="350" height="200">
<img src="image/img_1.png" name="example_img"
alt="Картинки для демонстрации работы скрипта смены изображений">
</td>
</tr>
</table>
Данный пример поможет Вам избежать переизбытка изображений на одной странички сайта и улучшит общую читабельность.
Создание вкладок при помощи HTML и CSS
В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.
Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.
При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.
Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.
Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:
Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление так же можно легко изменить.
При создании вкладок HTML разметка вкладок выглядит следующим образом:
<div class="tabs">
<input type="radio" name="inset" value="" id="tab_1" checked>
<label for="tab_1">Вкладка №1</label>
<input type="radio" name="inset" value="" id="tab_2">
<label for="tab_2">Вкладка №2</label>
<input type="radio" name="inset" value="" id="tab_3">
<label for="tab_3">Вкладка №3</label>
<input type="radio" name="inset" value="" id="tab_4">
<label for="tab_4">Вкладка №4</label>
<div id="txt_1">
<p>Произвольное содержимое...</p>
<p>Произвольное содержимое...</p>
<p>Произвольное содержимое...</p>
</div>
<div id="txt_2">
<p>Вторая вкладка</p>
</div>
<div id="txt_3">
<p>Размеры содержимого вкладок</p>
<p>могут отличаться по высоте!</p>
</div>
<div id="txt_4">
<img src="image/logo.png" width="533" height="77" alt="Лого">
</div>
</div>
Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами <head> и </head> добавьте следующие стили оформления:
<style type="text/css">
.tabs { width: 100%; padding: 0px; margin: 0 auto; }
.tabs>input { display:none; }
.tabs>div { display: none;
padding: 12px;
border: 1px solid #C0C0C0;
background: #FFFFFF;
}
.tabs>label {
display: inline-block;
padding: 7px;
margin: 0 -5px -1px 0;
text-align: center;
color: #666666;
border: 1px solid #C0C0C0;
background: #E0E0E0;
cursor: pointer;
}
.tabs>input:checked + label {
color: #000000;
border: 1px solid #C0C0C0;
border-bottom: 1px solid #FFFFFF;
background: #FFFFFF;
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 { display: block; }
</style>
В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.
Текст на изображениях, примеры и готовый код
Блокировка выделения контента для копирования
<script language=
"JavaScript"
type=
"text/javascript"
>document.onselectstart =
function
() {
return
false
}
document.oncontextmenu =
function
() {
return
false
}
document.onmousedown =
function
() {
return
false
}
</script>
Данный метод вовсе не является панацеей от воровства контента. При достаточных навыках можно просмотреть код страницы и вытащить текст, однако его постоянно придется очищать от тегов и стилей, что не каждый осилит (нервы не у всех железные, что нам, собственно говоря, на руку!).
Автоматическая вставка ссылки на источник
<script type=
"text/javascript"
>
function
addLink() {
var
body_element = document.getElementsByTagName(
'body'
)[0];
var
selection;
selection = window.getSelection();
var
pagelink =
" Источник: <a href='"
+ document.location.href +
"'>"
+ document.location.href +
"</a>"
;
var
copytext = selection + pagelink;
var
newdiv = document.createElement(
'div'
);
newdiv.style.position =
'absolute'
;
newdiv.style.left =
'-99999px'
;
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(
function
() {
body_element.removeChild(newdiv);
}, 0);
}
document.oncopy = addLink;
</script>
Данный скрипт дает пользователю возможность скопировать контент сайта, однако при вставке автоматически добавляет активную ссылку на источник. Данная функция будет постоянно напоминать пользователям (особенно недобросовестным) о том, что нужно оставлять открытую для индексации активную ссылку на источник.
Код скрипта можно вставить либо между тегами <head>...</head> исполняемого файла шаблона (обычно это файл index.php, в шаблонах студии Yootheme это файл theme.php, который находится в папке "layouts"), либо перед закрывающим тегом </body> все того же файла.
фото возле ссылки Екатерина Вилкова