Проба видео

Рубрика: Техничка

 

 

<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>

 


Скрипт слайдера, спрятанного под спойлер

JavaScript код:
Выделить
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

Далее необходимо будет разместить код заголовков спойлеров и тела спойлера для отображения и скрытия слайдера:

HTML код:
Выделить
<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>&lt;&lt;&lt;</b></td>
   <
td id="slide_show"></td>
   <
td id="show_forward"><b>&gt;&gt;&gt;</b></td>
  </
tr>
 </
table>
</
div>

Так же не забываем в шапку сайта между тегами <head> и </head> добавить стили для правильного отображения и работы слайдера и спойлеров:

HTML код:
Выделить
<style type="text/css">
 
#body { display:none; font-style:italic; }
 #show_back, #show_forward, .sp_links { cursor:pointer; }
 
.sp_links display:inline-blockwidth:200pxmargin:5pxborder-radius:7px;
 
text-align:centerfont-weight:boldcolor:#0000FF; border:1px solid #808080; }
 
.selected background-color:#CCCCCC; }
</style>

Теперь остается добавить JavaScript код, который будет показывать и скрывать содержимое спойлера при кликах по заголовкам, а так же отвечающий за работу слайдера:

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]<0num[id]=imgs[id].length-1;
  if (
num[id]>=imgs[id].lengthnum[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 страничек.

 


Смена изображения при клике по ссылке

 

Для того, чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.

 

Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.

Для получения такого эффекта "смены" изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:

JavaScript код:
Выделить
<script type="text/javascript">
function 
l_image (a) {
    
document.example_img.src=a
}
</script>

В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:

HTML код:
Выделить
<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 разметка вкладок выглядит следующим образом:

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> добавьте следующие стили оформления:

HTML код:
Выделить
<style type="text/css">
.
tabs width100%; padding0pxmargin0 auto; }
.
tabs>input display:none; }
.
tabs>div displaynone;
    
padding12px;
    
border1px solid #C0C0C0;
    
background#FFFFFF;
}
.
tabs>label {
    
displayinline-block;
    
padding7px;
    
margin-5px -1px 0;
    
text-aligncenter;
    
color#666666;
    
border1px solid #C0C0C0;
    
background#E0E0E0;
    
cursorpointer;
}
.
tabs>input:checked label {
    
color#000000;
    
border1px solid #C0C0C0;
    
border-bottom1px 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> все того же файла.