<style><![CDATA[
/*
If we wanted to run this demo from another domain, we would set this
style.
document
{
base-url: http://frontalcode.com/;
}
*/
*:link { color: #ffffff; } *:link:hover, *:visited:hover { underline: false; color: #ff5523; }
img
{
/*
site-wide styles; allow-smoothing will keep images from looking
pixelated when the window is resized, and the scale will keep the
image from distorting when the window is resized.
*/
allow-smoothing: true;
resize-scale: showall;
}
text
{
font-family: Swift LT Std;
flash-text-anti-alias-type: advanced;
}
#pictures
{
/*
this is the left-most div class, the div that contains
the big images.
*/
width: 60%;
height: 100%;
layout: stack;
margin-bottom: 0px;
background-color: #cccccc;
}
#pictures div
{
/*
the container div for big images. this is where the
background colors that change with each image are set.
*/
width: 100%;
height: 100%;
overflow: visible;
@onSelect
{
// Set our image (our first child so "gE(1)") transparent and
// fade in 15 frames later.
//
var img = gE ( 1 );
img.sS ( "alpha", 0 );
com.frontalcode.Scheduler.gI ( ).removeTask ( dynamic.timerId );
dynamic.timerId = com.frontalcode.Scheduler.setTimeoutInFrames ( function ( )
{
img.sS ( "style-tween-duration", 10 );
img.prepStyleTween ( );
img.sS ( "alpha", 1 );
img.tweenStyles ( );
}, 10 );
}
@onDeselect
{
// Stop any alpha tween that may be in progress or about to
// start.
//
com.frontalcode.Scheduler.gI ( ).removeTask ( dynamic.timerId );
var img = gE ( 1 );
img.stopStyleTween ( );
img.sS ( "alpha", img.gS ( "alpha" ) );
}
@onWillSelect
{
// Quickly end the current transition and jump to our slide.
//
gE ( "tag_mgr" ).jumpTo ( gE ( "tag_mgr" ).next, true );
gE ( "picture_mgr" ).jumpTo ( gE ( "picture_mgr" ).next, true );
}
}
#pictures img
{
/*
setting a width and height of 90% gives padding around the image,
and setting the resize origin to center middle causes the image
to stay in the center point of its div.
*/
width: 90%;
height: 90%;
shadow-blur: 4;
shadow-strength: 0.5;
shadow-distance: 2;
allow-smoothing: true;
resize-scale-origin: center middle;
margin: auto;
style-tween-ease: fl.transitions.easing.Strong.easeIn;
}
#sliderDiv
{
width: 40%;
height: 100%;
margin-left: 60%;
top: 0%;
overflow: hidden;
background-color: #ffffff;
}
#slideThumbs
{
/*
this is the container div to hold the thumbnail images.
*/
overflow: hidden;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
blend-mode: layer;
}
#slideThumbs img
{
// this is the style class for each thumbnail image.
//
alpha: .5;
width: 100%;
height: 20%;
@onClick
{
// Jump to the same element in the "tag_mgr" manager.
//
gE ( "tag_mgr" ).jumpTo ( childIndex + 1 );
// Jump to the same element in the "picture_mgr" manager.
//
gE ( "picture_mgr" ).jumpTo ( childIndex + 1 );
}
}
#slideThumbs img:hover
{
// When we roll over an image, make it fully visible.
//
alpha: 1;
}
.mouseScroll
{
@onMouseMoveRaw
{
/*
this is the line that scrolls the div on mouse movements. It
is set to onMouseMoveRaw so that any image/div/text within this
div can also have actions.
*/
dynamic.targetY = (scrollTopMax * movie.mouseY / containerHeight);
}
@onEnterFrame
{
// The divisor of 5 eases us to our target. A larger divisor makes
// the ease slower.
//
if ( ! isNaN ( dynamic.targetY ) )
{
var delta = ( dynamic.targetY - scrollTop ) / 5;
scrollTop += delta;
}
}
}
#tag_container
{
// container class for the description tags
//
width: 50%;
height: 40%;
top: 20%;
left: 40%;
layout: stack;
}
#tag_container text
{
// class for the body styles of the description text for each image
//
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: left;
font-size: 12px;
leading: 7;
scroll: auto;
// If we have a scrollbar, make it 20px wide. Below we'll specify that
// the right half of this will be for the actual scrollbar and the left
// half will be spacing.
//
scrollbar-width: 20px;
}
#tag_container .frScrollbarVert [name=track]
{
// With these styles, we say that the scrollbar should take up half of
// the available width set with the style scrollbar-width. This will
// create a gutter between the text and the scrollbar.
//
width: 50%;
right: 100%;
}
]]></style>
<div id="pictures" >
<manager id="picture_mgr" style="hide-unselected: true; tween-container-init: true;">
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="10" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="5" />
</manager>
<!--
div containing the big images.
-->
<div style="background-color: #3a4e54;"><img src="assets/images/slide_img1.jpg" /></div>
<div style="background-color: #4b3636;"><img src="assets/images/slide_img2.jpg" /></div>
<div style="background-color: #3e434c;"><img src="assets/images/slide_img3.jpg" /></div>
<div style="background-color: #36473b;"><img src="assets/images/slide_img4.jpg" /></div>
<div style="background-color: #5c5a52;"><img src="assets/images/slide_img5.jpg" /></div>
<div style="background-color: #3a4547;"><img src="assets/images/slide_img6.jpg" /></div>
<div style="background-color: #1f324d;"><img src="assets/images/slide_img7.jpg" /></div>
<div style="background-color: #464a39;"><img src="assets/images/slide_img8.jpg" /></div>
</div>
<div id="sliderDiv" style="background-color: #333333;">
<!--
div containing the image slider.
-->
<div id="imgSlider" style="height: 100%; float:left; overflow: hidden;">
<div id="slideThumbs" class="mouseScroll">
<img id="test" src="assets/images/slide_thumb_img1.jpg" />
<img src="assets/images/slide_thumb_img2.jpg" />
<img src="assets/images/slide_thumb_img3.jpg" />
<img src="assets/images/slide_thumb_img4.jpg" />
<img src="assets/images/slide_thumb_img5.jpg" />
<img src="assets/images/slide_thumb_img6.jpg" />
<img src="assets/images/slide_thumb_img7.jpg" />
<img src="assets/images/slide_thumb_img8.jpg" />
</div>
<!--
div containing text content.
-->
<div id="tag_container" style="color: #ffffff;">
<manager id="tag_mgr" style="hide-unselected: true; tween-container-init: true;">
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="10"/>
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="5" />
</manager>
<text><![CDATA[<font size="18">Edinburgh</font><br /><br />Located in the south-east of Scotland, Edinburgh lies on the east coast of the Central Belt, along the Firth of Forth, near the North Sea. Owing to its rugged setting and vast collection of Medieval and Georgian architecture, including numerous stone tenements, it is often considered one of the most picturesque cities in Europe.]]></text>
<text><![CDATA[<font size="18">Stonehenge</font><br /><br />Stonehenge is a prehistoric monument located in the English county of Wiltshire, about 3.2 kilometres (2.0 mi) west of Amesbury and 13 kilometres (8.1 mi) north of Salisbury. One of the most famous sites in the world, Stonehenge is composed of earthworks surrounding a circular setting of large standing stones and sits at the centre of the densest complex of Neolithic and Bronze Age monuments in England, including several hundred burial mounds.]]></text>
<text><![CDATA[<font size="18">Amsterdam</font><br /><br />Its name is derived from Amstel dam, indicative of the city's origin: a dam in the river Amstel where the Dam Square is today. Settled as a small fishing village in the late 12th century, Amsterdam became one of the most important ports in the world during the Dutch Golden Age, a result of its innovative developments in trade.]]></text>
<text><![CDATA[<font size="18">Brussels</font><br /><br />Brussels is the de facto capital city of the European Union and the largest urban area in Belgium. It includes the Brussels municipality which is the capital of Belgium, Flanders and the French Community of Belgium by law.]]></text>
<text><![CDATA[<font size="18">London</font><br /><br />London is the capital of England and the United Kingdom. It has been an influential city for two millennia and its history goes back to its founding by the Romans.]]></text>
<text><![CDATA[<font size="18">Barcelona</font><br /><br />Barcelona is recognised as a global city because of its importance in finance, commerce, media, entertainment, arts and international trade. Barcelona is a major economic centre with one of Europe's principal Mediterranean ports, and Barcelona International Airport is the second largest in Spain after the Madrid-Barajas Airport (handles about 30 million passengers per year).]]></text>
<text><![CDATA[<font size="18">Berlin</font><br /><br />Berlin is the capital city and one of sixteen states of Germany. With a population of 3.4 million within its city limits, Berlin is Germany's largest city. It is the second most populous city and the eighth most populous urban area in the European Union.]]></text>
<text><![CDATA[<font size="18">Hydra</font><br /><br />Hydra is perhaps the most beautiful port village in all of Greece. A tiny harbor ringed with cafes, restaurants and gold shops is surrounded by a village of stone houses and villas that rise up the hills like an ampitheatre. But one of the best things about Hydra is that there are no cars. Everything is moved by donkey, including groceries, building supplies, people and their luggage.]]></text>
</div>
<!--
frontal credit
-->
<text class="frLink" href="http://frontalcode.com" target="_blank" style="left: 75%; top: 1%; padding-top: 5px; padding-right: 2px; width: 140px; font-size: 12px;"><![CDATA[Created w/ Frontal]]></text>
</div>
</div>