Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Фотогалерея на JavaScript (javascript фотогалерея)

#21 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 23 Январь 2009 - 23:46

ZiTosS, За это огромное спасибо!
Только значение this.thumbnailRows мне пришлось поменять в самом xml файле галереи, т.к изменения в imago.js не дали результата....странно но факт.


  • 0

#22 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 23 Январь 2009 - 23:51

Кстати по поводу кодировки...
Для тех кто использует Macromedia Dreamweaver:

Зайдите изменить>> свойства страницы>>заголовок\кодировка выберите нужную кодировку(Кириллица(windows)), а рядом, справа, есть кнопочка Перезагрузить (Reload). На нее нажмите, а потом на Ок. Иногда это приходится делать повторно, но должно работать с первого раза.

Почитать здесь кодировка
  • 0

#23 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 24 Январь 2009 - 04:08

Подскажите что делать???
зарегистрировал аккаунт на бесплатном хостинг провайдере freezoka.com, залил туда свой сайт с этой галлереей, и при переходе в галлерею открывается страница с сообщением:

this.loader = new GalleryLoader('gallery_cherry.xml', 'gallery_cherry', "cherry"); this.prefetching = 'all';
Free Web Hosting

Не знаю что делать...может нужно создавать файл .htaccess и чтото в нем прописывать? (поддержка xml?js)
  • 0

#24 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 24 Январь 2009 - 06:36

А вот на этом сервере все работает почему???neonstyle.uuuq.com
  • 0

#25 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 26 Январь 2009 - 14:55

this.loader = new GalleryLoader('gallery_cherry.xml', 'gallery_cherry', "cherry"); this.prefetching = 'all';
Free Web Hosting

Всё дело в этом. Как я уже говорил, многие бесплатные хостеры размещают рекламу на сайтах-донорах. Поэтому большая часть косяков возникает отсюда. Почему?!
Всё объясняется очень просто, чтобы добавить рекламу, хостеры прибегают к подгрузке всех страниц открываемых сервером куска кода с рекламой. Поэтому когда вы делаете запрос к файлу gallery_cherry.xml с помощью Ajax, это идёт обращение к серверу, сервер возвращает вам код файла gallery_cherry.xml + реклама.
А если сказать ещё точнее, XML язык точный, если синтаксис документа не соответствует шаблону и присутствует какая либо лишняя информация происходит сбой в обработке документа.

Что и произошло с вашей галереей ;)
  • 0

#26 Гость_onefineday_*

Гость_onefineday_*
  • Гости

Отправлено 12 Февраль 2009 - 16:11

Добрый вечер всем!
Скажите, а кто-нибудь знает, как сделать галерею по образцу ngallery ( _http://gafiyka.com/gallery/osen-2008 ) ?
Очень нужно, а голова не варит.
  • 0

#27 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 13 Февраль 2009 - 00:11

onefineday, посмотрел все исходники, знаю что _http://gafiyka.com/js/thickbox-pack.js?ver=3.0.2 непосредственно связан с всплывающей картинкой
Код, представленный ниже, задаёт картинку для прелоадера
var tb_pathToImage = "/i/loadingAnimationv3.gif";

А как у них галерея выводится, мне не понятно... Возможно тот же самый парсер XML
  • 0

#28 kolesgan

kolesgan
  • Пользователь
  • 73 сообщений
  • Репутация: 0

Отправлено 02 Сентябрь 2009 - 18:46

Galleria
Скачать:
_http://plugins.jquery.com/project/galleria
Пример:
_http://monc.se/galleria/demo/demo_01.htm

как ее подключить, ничего не понимаю
  • 0

#29 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 02 Сентябрь 2009 - 20:30

kolesgan,
Читаем инструкцию на страничке: http://devkick.com/lab/galleria/.
Скачиваем, складируем в правильные места и вписываем все что она велит на чистом английском языке.

Если использовать настройки скрипта по умолчанию, то получится так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Galleria Demo</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
</head>
<body>
<ul class="gallery">
<li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>

</body>
</html>
Если хочется, чтоб было так как в демо1, то так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Galleria Demo 1</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
<script type="text/javascript">

jQuery(function($) {

$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});

</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

</style>
</head>
<body>
<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>

</body>
</html>

  • 0

#30 Гость_Serebrjany mir_*

Гость_Serebrjany mir_*
  • Гости

Отправлено 01 Октябрь 2009 - 00:10

Предлагаю готовый скрипт фотогалереи написанный на JavaScript. Сейчас довольно часто требуется создать на сайте именно такую фишку, может кто-нибудь предложит другое решение???
Список изображений галереи задается в коде скрипта в виде массива.
Из-за достаточно небольшого объема кода можно, например, легко производить его генерацию с помощью серверного скрипта. Таким образом достаточно просто организовать фотогалерею из нескольких разделов с разными списками изображений.
Далее приведен код скрипта, в html-документе.



Код
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru