Sidebar

Highslide на форум

  • Раздел «On-Line» — часть данного форума, поэтому следует руководствоваться в первую очередь [URL=/threads/pravila-foruma.17042/]Правилами Форума[/URL] при написании сообщений и создании тем. Помимо этого, есть особые пункты настоящего раздела.

    0. Для чего нужен настоящий раздел? Для того, чтобы форумчане могли ознакомиться с интересными сайтами и онлайн-сервисами в безграничных просторах интернетов, похвастаться своими домашними страничками, обсудить нюансы создания сайтов.

    1. Корректно называйте тему: указывайте адрес сайта в названии темы, либо пишите чья же это домашняя страница (HP).

    2. Прежде чем создавать тему, воспользуйтесь поиском. Вполне возможно, что интересующий вас сайт уже обсуждался. В таком случае, свои мысли нужно писать именно туда, а не плодить одинаковые темы. Дельные сообщения для поднятия старых тем не запрещены. Бесполезные же запрещены и в новых темах. Убедившись в отсутствии темы, смело создавайте свою.

    3. Запрещается обсуждение взлома паролей почты, форумов, других подобных сервисов.

    4.2 В настоящем разделе действует особое правило «4.2». Запрещены сообщения, содержащие вызывающе неверную либо вызывающе неверно интерпретированную информацию, способную привести к развитию нездоровой дискуссии. Мы уважаем чужое мнение, но оставляем за собой право удалять сообщения, безаппеляционно сообщающие вызывающе неверные факты.

Тебе на сайт такое нужно

  • Да

    Голосов: 6 54.5%
  • Нет

    Голосов: 5 45.5%

  • Количество людей, принявших участие в опросе
    11

Noxter

Simpla Developer
02.09.2007
2 766
36
Highslide на форум

Кто знает как прикрутить к форуму на Ucoz просмотр изображений типа как
на CSM, есть сайтег http://highslide.com но там прямые ссылки на изображение а мне нужно, если пользователь залил картинку, то
она бы масштабировалась как бы...
 

Noxter

Simpla Developer
02.09.2007
2 766
36
2 Ev0lutioN:
Не совсем так. Я хочу использовать для этого скрипт highslide.js но как
его прикрутить я хз...
+ на юкозе когда заливаеш файлы, в аттаче отображается все виды файлов не только .jpg
 

qpAHToMAS

Administrator
Команда форума
Администратор
22.10.2006
9 323
33
  • Золотая медаль 215
  • Золотая медаль 152
  • Серебряная медаль 136
  • Золотая медаль 221
В таких скриптах (типа Lightbox, как тут) есть руководства по их установке на форум/сайт и т.п.
Поддерживает ли их твой хостинг должен проверить ты сам, хотя там все реализовано слишком просто, никаких особых требований.

2 Noxter:
*.js файлы как правило заливаются в директорию с сайтом.
 

Noxter

Simpla Developer
02.09.2007
2 766
36
2 qpAHToMAS:
Опять меня не поняли я шарю с html но там в руководстве пишется
как использовать но там идет ссылка на изображение допустим
<img src='1.jpg'/> а мне нужно замисть ссылки 1.jpg прикрутить подуль
как хз...
Прошу отписатся тем кто с юкозом работает!

Вот исходник:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>

<!--
	1 ) Reference to the files containing the JavaScript and CSS.
	These files must be located on your server.
-->

<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->



<!--
    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.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.fadeInOut = true;
	hs.dimmingOpacity = 0.8;
	hs.outlineType = 'rounded-white';
	hs.captionEval = 'this.thumb.alt';
	hs.marginBottom = 105 // make room for the thumbstrip and the controls
	hs.numberPosition = 'caption';

	// Add the slideshow providing the controlbar and the thumbstrip
	hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		overlayOptions: {
			className: 'text-controls',
			position: 'bottom center',
			relativeTo: 'viewport',
			offsetY: -60

		},
		thumbstrip: {
			position: 'bottom center',
			mode: 'horizontal',
			relativeTo: 'viewport'
		}
	});
</script>


</head>

<body>

<!--
	3) Put the thumbnails inside a div for styling
-->

<div class="highslide-gallery" style="width: 600px; margin: auto">
<!--
	4) This is how you mark up the thumbnail images with an anchor tag around it.
	The anchor's href attribute defines the URL of the full-size image. Given the captionEval
	option is set to 'this.img.alt', the caption is grabbed from the alt attribute of
	the thumbnail image.
-->
	[COLOR=Red]<a class='highslide' href='../images/thumbstrip01.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip01.thumb.png' alt='Mountain valley'/></a>[/COLOR]

	<a class='highslide' href='../images/thumbstrip02.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>

	<a class='highslide' href='../images/thumbstrip03.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip03.thumb.png' alt='Sunset in the mountain'/></a>

	<a class='highslide' href='../images/thumbstrip04.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip04.thumb.png' alt='Resting skier'/></a>

	<a class='highslide' href='../images/thumbstrip05.jpg' onclick="return hs.expand(this)">

		<img src='../images/thumbstrip05.thumb.png' alt='Contemplating dog'/></a>

	<a class='highslide' href='../images/thumbstrip06.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip06.thumb.png' alt='Cabins'/></a>

	<a class='highslide' href='../images/thumbstrip07.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip07.thumb.png' alt='Dark skies in sunny landscape'/></a>

	<a class='highslide' href='../images/thumbstrip08.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip08.thumb.png' alt='Blue sky'/></a>

	<a class='highslide' href='../images/thumbstrip09.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip09.thumb.png' alt='Ptarmigan'/></a>

	<a class='highslide' href='../images/thumbstrip10.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip10.thumb.png' alt='Ptarmigans'/></a>

	<a class='highslide' href='../images/thumbstrip11.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a>

	<a class='highslide' href='../images/thumbstrip12.jpg' onclick="return hs.expand(this)">

		<img src='../images/thumbstrip12.thumb.png' alt='Patterns in the snow'/></a>

	<a class='highslide' href='../images/thumbstrip13.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip13.thumb.png' alt='Cabins'/></a>

	<a class='highslide' href='../images/thumbstrip14.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip14.thumb.png' alt='Old stone cabins'/></a>

	<a class='highslide' href='../images/thumbstrip15.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip15.thumb.png' alt='A litte open water'/></a>

	<a class='highslide' href='../images/thumbstrip16.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip16.thumb.png' alt='Dipper'/></a>

	<a class='highslide' href='../images/thumbstrip17.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip17.thumb.png' alt='Dipper'/></a>

	<a class='highslide' href='../images/thumbstrip18.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip18.thumb.png' alt='Mountains'/></a>

	<a class='highslide' href='../images/thumbstrip19.jpg' onclick="return hs.expand(this)">

		<img src='../images/thumbstrip19.thumb.png' alt='Birch trees'/></a>

	<a class='highslide' href='../images/thumbstrip20.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip20.thumb.png' alt='Highland woods'/></a>

	<a class='highslide' href='../images/thumbstrip21.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip21.thumb.png' alt='Frozen lake'/></a>

	<a class='highslide' href='../images/thumbstrip22.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip22.thumb.png' alt='Spring in the mountains'/></a>

	<a class='highslide' href='../images/thumbstrip23.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip23.thumb.png' alt='Spring in the mountains'/></a>

	<a class='highslide' href='../images/thumbstrip24.jpg' onclick="return hs.expand(this)">
		<img src='../images/thumbstrip24.thumb.png' alt='Fjord landscape'/></a>


</div>
</body>
</html>
Или обьясните как Lightbox сдесь прописан...
 
Последнее редактирование:

qpAHToMAS

Administrator
Команда форума
Администратор
22.10.2006
9 323
33
  • Золотая медаль 215
  • Золотая медаль 152
  • Серебряная медаль 136
  • Золотая медаль 221
2 Noxter:
Т.е. ты хочешь что бы все ссылки на изображения использовали эту фишку? Так делают, и думаю написано это опять же в руководстве :), думаю точно так же делаются стили, например указывается что бы все ссылки на странице имели одинаковое оформление (цвет, размер, подчеркивание и т.д.).
Как это сделать и поддерживает ли это твой хостинг — хз.
 

Noxter

Simpla Developer
02.09.2007
2 766
36
2 qpAHToMAS:
Есть такая хрень когда закидываеш изображения
$IMG_URL1$
$IMG_URL2$
$IMG_URL3$
тоисть заместь ссылки НО мне нужно больше $IMG_URL$ а их всего-лишь
3 можна использовать так аот я подумал может есть какой ява скрипт?
Для затухания картинок есть вот что:
Код:
a:hover img {
        filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
        -moz-opacity: 0.5; /* Mozilla 1.6 */
        -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
        opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
        filter: alpha(opacity=50); /* IE 5.5+*/
}
Может это как то с .js можна связать.
 

qpAHToMAS

Administrator
Команда форума
Администратор
22.10.2006
9 323
33
  • Золотая медаль 215
  • Золотая медаль 152
  • Серебряная медаль 136
  • Золотая медаль 221
2 Noxter:
$IMG_URL1$ в конечном и в любом случае на странице будет как <img src="URL">, по этому как я сказал выше — необходимо сделать правило, которое добавляло бы вокруг <img src="URL"> "class='highslide'" и другую муть для работы просматривальщика...

Это все как я думаю, на деле может быть далеко не так :).
 

Noxter

Simpla Developer
02.09.2007
2 766
36
2 kogemyaka:
Да загрузить можно дофига а просматривать с помощью highslide.js можна всего-лишь 3, остальные будут ссылками на пикчар...
 

Game Server

Доноры Красавчики

Пользователи онлайн

Нет пользователей онлайн.