Why use flash anymore?
The net is changing fast. Release of the iPad and other mobile devices that have correctly made the decision to discontinue Adobe Flash.
I say correct decision because not only is flash yesterdays technology, but it is far from the optimal way to produce simple motion in web pages.
Flash still has it’s place, just not as a way to inject interesting motion into websites.
So what do we use on http://www.InteractiveWebs.com home page?
We have some simple code that renders motion:
<div class="slideshow">
<div class="slide">
<div class="inblock_first">
<div class="wsc_image_frame">
<div class="wsc_frame_tl">
<div class="wsc_frame_tr">
<div class="wsc_frame_tc">
</div>
</div>
</div>
<div class="wsc_frame_cl">
<div class="wsc_frame_cr">
<div class="wsc_frame_cc">
<img alt="" src="/Portals/0/banners/slide2.jpg" />
</div>
</div>
</div>
<div class="wsc_frame_bl">
<div class="wsc_frame_br">
<div class="wsc_frame_bc">
</div>
</div>
</div>
</div>
</div>
<div class="inblock_second">
<h1>Have a Business that needs to get a message out?</h1>
<p>InteractiveWebs provides the best of Content Management Systems on our professional hosting services.<br />
Combining DotNetNuke, WordPress Blogs, iPhone Apps, Microsoft CRM & hosted solutions..<br />
<br />
</p>
<a class="button2" href="/Services/Mushroom.aspx"><span><strong>More</strong></span></a>
</div>
<div class="cleaner"></div>
</div>
<div class="slide">
<div class="inblock_second">
<h1>We have a solution… that is perfect…</h1>
<p>We have some increasable solutions with years of experience…</p>
<h4>
We would love to share them!</h4>
<p><br />
</p>
<a class="button2" href="/Services/Mushroom.aspx"><span><strong>More</strong></span></a>
</div>
<div class="inblock_first">
<div class="wsc_image_frame">
<div class="wsc_frame_tl">
<div class="wsc_frame_tr">
<div class="wsc_frame_tc">
</div>
</div>
</div>
<div class="wsc_frame_cl">
<div class="wsc_frame_cr">
<div class="wsc_frame_cc">
<img alt="" src="/Portals/0/banners/slide1.jpg" />
</div>
</div>
</div>
<div class="wsc_frame_bl">
<div class="wsc_frame_br">
<div class="wsc_frame_bc">
</div>
</div>
</div>
</div>
</div>
<div class="cleaner"></div>
</div>
<div class="slide">
<div class="wsc_image_frame">
<div class="wsc_frame_tl">
<div class="wsc_frame_tr">
<div class="wsc_frame_tc">
</div>
</div>
</div>
<div class="wsc_frame_cl">
<div class="wsc_frame_cr">
<div class="wsc_frame_cc">
<img alt="" src="/Portals/0/banners/slide.jpg" />
</div>
</div>
</div>
<div class="wsc_frame_bl">
<div class="wsc_frame_br">
<div class="wsc_frame_bc">
</div>
</div>
</div>
</div>
<div class="cleaner"></div>
</div>
</div>
The source references some jQuery effects known as cycle: http://jquery.malsup.com/cycle/
You will see on this page that it uses code in this method:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin – Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!– include jQuery library –>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!– include Cycle plugin –>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘fade’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
</body>
</html>
Producing this page: http://jquery.malsup.com/cycle/basic.html
Within DotNetNuke
Within DotNetNuke, there are a bunch of module and skins that have this effect built in. We use a skin known as LightHeads (not developed by us) that uses some hard coded references that make the implementation of this effect really simple. As the first block of code above indicates.
We love jQuery and have used it in our Mushroom Image module and our Mushroom Lite Module.
