Сайт оптимизирован для работы с разрешением монитора 1440 х 900 пикселей.



Делаем плавное открытие и закрытие картинок и видео плеера .




Highslide JS
Сплав товарищей по бурной реке Амазонка .

Что бы сделать у себя на сайте такую кликабельную картинку воспользуемся скриптом Highslide JS. .

Смотри пример - нажми на картинку слева .




Первое скачиваем папку с архивом highslide.zip.html открываем арихв извлекаем оттуда файл highslide и помещяем его в корень вашего сайта с помощью программы FileZilla (тоесть в правое окно программы) .



Bторое копируем скрипт и помещяем его между

<head>   и   </head>




Посмотрите как у вас должно получиться нажав сюда
<head>  


<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css"/>
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
</script>


</head>

<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css"/>
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
</script>



Третье скопируйте и поместите этот код у себя на странице там где вы хотели бы разместить картинку

<div>
<!--
3) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a href="image/bc.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="image/mc.jpg" alt="Highslide JS"
title="Click to enlarge" height="125" width="150"/></a>
<!--
4 (optional). This is how you mark up the caption. The caption must be directly after the anchor above..
-->
<div class="highslide-caption">
Сплав товарищей по бурной реке Амазонка .
</div>
где :
image - это папка с картинками
bc - это большая картинка
mc - это маленькая картинка
height="125" width="150" - это высота и ширина маленькой картинки






Делаем плавное открытие и закрытие видео плеера .


смотри пример нажми на видео плеер слева


Что бы сделать у себя на сайте такой плеер вам нужно
Первое
Скачайте архив fancybox.zip
. Откройте его извлеките оттуда папку fancybox и поместите её в корень вашего сайта с помощью программы FileZilla (тоесть в правое окно программы) .



<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth" : 560, "frameHeight" : 340});
$("a.content").fancybox({"frameWidth" : 560, "frameHeight" : 540});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();
});
</script>
Bторое копируем скрипт и помещяем его между

<head>   и   </head>



Посмотрите как у вас должно получиться нажав сюда
<head>  


<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script><script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.first").fancybox();$("a.two").fancybox();$("a.video").fancybox({"frameWidth" : 560, "frameHeight" : 340}); $("a.content").fancybox({"frameWidth" : 560, "frameHeight" : 540}); }); </script> <script type="text/javascript"> $(document).ready(function() { $("a.gallery").fancybox();
});
</script>



</head>






  Третье скопируйте этот код и разместите у себя на странице втом месте где будет расположен видео плеер


<a class="classname" href="content.html"> </a>
<a class="gallery" href="#testube"><img alt="" src="image/bazuka.jpg"/> </a>

<div style="display:none" id="testube">
<!-- HTML - код ролика -->

<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/S8AccFhvV1U&hl=ru&fs=1"> </param> <param name="allowFullScreen" value="true"> </param ><param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/v/S8AccFhvV1U&hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>

<!-- конец HTML - кода ролика -->
</div>

где :
image - это папка с картинками
bazuka - это картинка (скриншот сделанный с видео плеера)
а то что написано зелёным цветом - это код видео ролика взятого на YouTube.





на прежнию  далее  на главную


















Яндекс.Метрика



Вы были на странице:




© Copyright 2010
Hosted by uCoz