Приветствую Вас Гость • Регистрация • Вход
Понедельник, 16.12.2019
Главная » 2012 » Декабрь » 22 » Красивое увеличение изображения (слайд-шоу)
13:35
Красивое увеличение изображения (слайд-шоу)
Здравствуйте уважаемые пользователи и подписчики!
Запостю ка я сегодня пожалуй еще один пост ,а то когда следующий будет уже и не знаю.Думаю все таки что нибудь полезное и подчеркнете.
Как то мне пришлось писать статейку и в неё нужно было впихнуть 3 картинки большого формата , но при сжатии теряется качество изображения да и выглядит картинка не естественно.А изображение мне как раз нужно было исходное в отличном качестве.
Для себя я нашел выход с помощью данного java кода любезно предоставленного сервисом slideshow.triptracker.net
Код
<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!--
  var viewer = new PhotoViewer();
  viewer.add('/1.png');
  viewer.add('/1.png');
//--></script>
<a href="javascript:void(viewer.show(0))">
<img src="/1.png" style="width:300px;height:300px;">
<img src="/2.png" style="width:300px;height:300px;">
</a>

Давайте теперь разсмотрим значения кода:
В первом viewer.add('/1.png'); значении мы ставим относительный путь к нашей картинке без какого либо сжатия.
Во втором значении < img src="/1.png" style="width:300px;height:300px;" > мы ставим путь к той же картинке но со сжатием , это и будет наша превьюшка на которую пользователь нажмёт и перед ним откроеться поле с запуском слайд-шоу.
Ну и конечно же пример работы скрипта.Вот что у нас получилось.
Для того что бы запустить слайд-шоу кликните по любой из картинок!
Категория: WEB-мастеру вопросы и советы | Просмотров: 1821 | Добавил: Samosval |Рейтинг: 5.0/1


Всего комментариев: 1
avatar
0
1 Maxhustler • 08:39, 25.12.2012
Эффектно выглядит.
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика