Csatlakozz te is!

Ha beszúrtad a portálod tetejére az alap jquery.js scriptet, akkor hozz létre egy egyszerű modult, vagy akár ugyanabba a modulba is beszúrhatod az alábbi kódot:

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 580px;">
	<tbody>
		<tr>
			<td style="background-color: rgb(204, 204, 204);">
				<p>
					<span style="font-size: 12px;"> 
						<span style="font-family: 'courier new',courier,monospace;">
							<style type="text/css">
								#slideshow {
									position:relative;
									height:400px;
								}
								#slideshow IMG {
									position:absolute;
									top:10;
									left:50;
									z-index:8;
								}
								#slideshow IMG.active {
									z-index:10;
								}
								#slideshow IMG.last-active {
									z-index:9;
								}
							</style>
					
							<script type="text/javascript">
								function slideSwitch() {
									var $active = $('#slideshow IMG.active');
									if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
									var $next =  $active.next().length ? $active.next()
										: $('#slideshow IMG:first');
									$active.addClass('last-active');
									$next.css({opacity: 0.0})
										.addClass('active')
										.animate({opacity: 1.0}, 1000, function() {
											$active.removeClass('active last-active');
										});
								}
								$(function() {
									setInterval( "slideSwitch()", 5000 );
								});
							</script>
						</span>
					</span>
				</p>
				<p>
					<span style="font-size: 12px;">
						<span style="font-family: 'courier new',courier,monospace;">
							<div id="slideshow">
		<img src="/portal/gportal/image/gallery/1244455792_76.png" width="500px" class="active" />
		<img src="/portal/gportal/image/gallery/1244455775_85.jpg" width="500px" />
		<img src="/portal/gportal/image/gallery/1244455786_70.jpg" width="500px" />
		<img src="/portal/gportal/image/gallery/1244455784_67.jpg" width="500px" alt="" />
		<img src="/portal/gportal/image/gallery/1244455785_77.jpg" width="500px" />
							</div>
						</span>
					</span>
				</p>
			</td>
		</tr>
	</tbody>
</table>

A kód egy css-ből, egy javascriptből és egy div-ből áll. A kód alján lévő div tartalmazza azokat a képeket, amik megjelennek a képnézegetőben. Ezeket kicserélheted, megadhatsz nekik fix szélességet is, de arra ügyelj, hogy a képek szélességének azonos értéket adj meg, különben bután fog kinézni a képnézegető.

Minta: