Фотогалерея (cu3ox) Исходные файлы

SE@RCHER

Библиотека JAVASCRIPT
03www.ru

1997

Javascript + CSS :: • блок • текст • линк • меню • фото • окно • кнопка • фон

С помощью CU3OX вы можете создать слайдер с cool 3D эффектами и переходы между фото.
Вы сможете разделить ваши изображения в любое количество фигур и повернуть их так, как вам нравится!
Вам не нужно иметь каких-либо профессиональных навыков в Flash, HTML, CSS и Javascript.
Вы можете воспользоваться редактором CU3OX или взять уже готовые примеры с этой страницы

Автосмена фото с помощью CU3OX построена на:

cu3ox

1. SWF-объект cu3ox.swfcu3ox.swf

2. Таблица стилей cu3oxCSS1.css

3. Файл cu3oxXML1.xml с задаваемыми параметрами

Вариант 1 left + fade

<?xml version="1.0" ?> <03www> <Settings> <imageWidth>300</imageWidth> <imageHeight>400</imageHeight> <segments>1</segments> <tweenTime>1.2</tweenTime> <tweenDelay>0.1</tweenDelay> <tweenType>easeInOutBack</tweenType> <zDistance>0</zDistance> <expand>20</expand> <innerColor>0xffffff</innerColor> <textBackground>0xff0000</textBackground> <startBackground>0xff0000</startBackground> <noLogo>0</noLogo> <shadowDarkness>100</shadowDarkness> <textDistance>3</textDistance> <autoplay>3</autoplay> <rDirection>left</rDirection> <borderRadius>16</borderRadius> <descriptionWidth>160</descriptionWidth> <descriptionHeight>60</descriptionHeight> <descriptionOffset>270</descriptionOffset> <descriptionType>fade</descriptionType> <logoText>03www.ru</logoText> <logoLink>http://03www.ru</logoLink> <noShadow>0</noShadow> <showControls>true</showControls> <startLogo></startLogo> <loop>1</loop> <sound></sound> </Settings> <Image Filename="001.jpg"> <Settings> <goLink></goLink> <rDirection>left</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 1</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="002.jpg"> <Settings> <goLink></goLink> <rDirection>left</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 2</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="003.jpg"> <Settings> <goLink></goLink> <rDirection>left</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 3</headline> <paragraph></paragraph> </Text> </Image> </03www>

Вариант 2 right + fade

<descriptionType>fade</descriptionType>
<rDirection>right</rDirection>

<?xml version="1.0" ?> <03www> <Settings> <imageWidth>300</imageWidth> <imageHeight>400</imageHeight> <segments>1</segments> <tweenTime>1.2</tweenTime> <tweenDelay>0.1</tweenDelay> <tweenType>easeInOutBack</tweenType> <zDistance>0</zDistance> <expand>20</expand> <innerColor>0xffffff</innerColor> <textBackground>0xff0000</textBackground> <startBackground>0xff0000</startBackground> <noLogo>0</noLogo> <shadowDarkness>100</shadowDarkness> <textDistance>3</textDistance> <autoplay>3</autoplay> <rDirection>right</rDirection> <borderRadius>16</borderRadius> <descriptionWidth>160</descriptionWidth> <descriptionHeight>60</descriptionHeight> <descriptionOffset>270</descriptionOffset> <descriptionType>fade</descriptionType> <logoText>03www.ru</logoText> <logoLink>http://03www.ru</logoLink> <noShadow>0</noShadow> <showControls>true</showControls> <startLogo></startLogo> <loop>1</loop> <sound></sound> </Settings> <Image Filename="001.jpg"> <Settings> <goLink></goLink> <rDirection>right</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 1</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="002.jpg"> <Settings> <goLink></goLink> <rDirection>right</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 2</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="003.jpg"> <Settings> <goLink></goLink> <rDirection>right</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 3</headline> <paragraph></paragraph> </Text> </Image> </03www>

Вариант 3 up + fade

<?xml version="1.0" ?> <03www> <Settings> <imageWidth>300</imageWidth> <imageHeight>400</imageHeight> <segments>1</segments> <tweenTime>1.2</tweenTime> <tweenDelay>0.1</tweenDelay> <tweenType>easeInOutBack</tweenType> <zDistance>0</zDistance> <expand>20</expand> <innerColor>0xffffff</innerColor> <textBackground>0xff0000</textBackground> <startBackground>0xff0000</startBackground> <noLogo>0</noLogo> <shadowDarkness>100</shadowDarkness> <textDistance>3</textDistance> <autoplay>3</autoplay> <rDirection>left</rDirection> <borderRadius>16</borderRadius> <descriptionWidth>160</descriptionWidth> <descriptionHeight>60</descriptionHeight> <descriptionOffset>270</descriptionOffset> <descriptionType>fade</descriptionType> <logoText>03www.ru</logoText> <logoLink>http://03www.ru</logoLink> <noShadow>0</noShadow> <showControls>true</showControls> <startLogo></startLogo> <loop>1</loop> <sound></sound> </Settings> <Image Filename="001.jpg"> <Settings> <goLink></goLink> <rDirection>up</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 1</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="002.jpg"> <Settings> <goLink></goLink> <rDirection>up</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 2</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="003.jpg"> <Settings> <goLink></goLink> <rDirection>up</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 3</headline> <paragraph></paragraph> </Text> </Image> </03www>

Вариант 4 down + fade

<?xml version="1.0" ?> <03www> <Settings> <imageWidth>300</imageWidth> <imageHeight>400</imageHeight> <segments>1</segments> <tweenTime>1.2</tweenTime> <tweenDelay>0.1</tweenDelay> <tweenType>easeInOutBack</tweenType> <zDistance>0</zDistance> <expand>20</expand> <innerColor>0xffffff</innerColor> <textBackground>0xff0000</textBackground> <startBackground>0xff0000</startBackground> <noLogo>0</noLogo> <shadowDarkness>100</shadowDarkness> <textDistance>3</textDistance> <autoplay>3</autoplay> <rDirection>up</rDirection> <borderRadius>16</borderRadius> <descriptionWidth>160</descriptionWidth> <descriptionHeight>60</descriptionHeight> <descriptionOffset>270</descriptionOffset> <descriptionType>fade</descriptionType> <logoText>03www.ru</logoText> <logoLink>http://03www.ru</logoLink> <noShadow>0</noShadow> <showControls>true</showControls> <startLogo></startLogo> <loop>1</loop> <sound></sound> </Settings> <Image Filename="001.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 1</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="002.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 2</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="003.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 3</headline> <paragraph></paragraph> </Text> </Image> </03www>

Вариант 5 UpDown + down

<descriptionType>upDown</descriptionType>
<rDirection>down</rDirection>

<?xml version="1.0" ?> <03www> <Settings> <imageWidth>300</imageWidth> <imageHeight>400</imageHeight> <segments>1</segments> <tweenTime>1.2</tweenTime> <tweenDelay>0.1</tweenDelay> <tweenType>easeInOutBack</tweenType> <zDistance>0</zDistance> <expand>20</expand> <innerColor>0xffffff</innerColor> <textBackground>0xff0000</textBackground> <startBackground>0xff0000</startBackground> <noLogo>0</noLogo> <shadowDarkness>100</shadowDarkness> <textDistance>3</textDistance> <autoplay>3</autoplay> <rDirection>up</rDirection> <borderRadius>16</borderRadius> <descriptionWidth>160</descriptionWidth> <descriptionHeight>60</descriptionHeight> <descriptionOffset>270</descriptionOffset> <descriptionType>upDown</descriptionType> <logoText>03www.ru</logoText> <logoLink>http://03www.ru</logoLink> <noShadow>0</noShadow> <showControls>true</showControls> <startLogo></startLogo> <loop>1</loop> <sound></sound> </Settings> <Image Filename="001.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 1</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="002.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 2</headline> <paragraph></paragraph> </Text> </Image> <Image Filename="003.jpg"> <Settings> <goLink></goLink> <rDirection>down</rDirection> <segments>1</segments> </Settings> <Text> <headline> ФОТО 3</headline> <paragraph></paragraph> </Text> </Image> </03www>

Для показа текста в латинице файл cu3oxXML1.xml должен быть в кодировке utf-8

4.Javascript swfobject.js

5. Показ работы SWF-объекта (cu3ox.swf) в блоке

<div id="cu3ox1" style="width:300px;height:430px;margin:0 auto;text-align:left"> <script type="text/javascript"> var cu3oxId = ("cu3ox" + Math.random()).replace(".",""); document.write('<div id ="' + cu3oxId + '" style="text-align:center;"><img src="data/images6/001.jpg"/></div>'); if (swfobject.getFlashPlayerVersion().major) swfobject.createSWF( {data:"engine6/cu3ox.swf", width:"100%", height:"100%" }, {FlashVars:"images=data/images6&cfgsuffix=1",menu:true, allowFullScreen:false, allowScriptAccess:'sameDomain', wmode:"transparent", bgcolor:'#FFFFFF', devicefont:false, scale:'noscale', loop:true, play:false, quality:'high'}, cu3oxId); </script> <noscript> <object type="application/x-shockwave-flash" data="engine6/cu3ox.swf" width="100%" height="100%" align="middle"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" align="middle"> <param name="movie" value="engine6/cu3ox.swf" /> <param name="FlashVars" value="images=data/images6&cfgsuffix=1" /> <param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /> <param name="quality" value="high"/><param name="scale" value="noscale"/> <param name="wmode" value="transparent" /> <param name="bgcolor" value="#ffffff" /> <img src="data/images6/001.jpg"/> </object> </noscript> </div>

ПРИМЕРЫ:

Фотогалерея (cu3ox)	Фотогалерея (cu3ox)	Фотогалерея (cu3ox)
Фотогалерея (cu3ox)	Фотогалерея (cu3ox)	Фотогалерея (cu3ox)
Фотогалерея (cu3ox)	Фотогалерея (cu3ox)	Фотогалерея (cu3ox)
Фотогалерея (cu3ox)	Фотогалерея (cu3ox)	Фотогалерея (cu3ox)
Фотогалерея (cu3ox)	Фотогалерея (cu3ox)	Фотогалерея (cu3ox)

ПРИМЕРЫ В АРХИВЕ:

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011

По материалам сайта cu3ox.com