css kom er niet uit

Status
Niet open voor verdere reacties.

ciske de rat

Verenigingslid
Lid geworden
10 jun 2003
Berichten
964
ik ben met een script bezig voro een pagina nou wil ik het script
meerdere keren gebruiken
ik weet alleen niet hoe ik het aan gepast moet krijgen
het gaat om volgende deel van het script
<div id='left'>
ik post het helescript zover ik hem gevonden heb op internet

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Image scroll</title>
<link rel="stylesheet" type="text/css" href="./css/scroll.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type='text/javascript' src="./js/jquery.imageScroller.js"></script>
<script type='text/javascript' src="./js/test.js"></script>
</head>
<body>
	<div id='left'>
		<a href='' title='Balletto'><img src='./imgs/pre1.jpg' /></a>
		<img src='./imgs/pre2.jpg' title='Pesca' />
		<a href='' title='Tigre'><img src='./imgs/pre3.jpg' /></a>
		<img src='./imgs/pre4.jpg' title='Lago' />
		<a href='' title='Abstract'><img src='./imgs/pre5.jpg' /></a>
	</div>
	
	<div id='right'>
		<a href='' title='Balletto'><img src='./imgs/pre1.jpg' /></a>
		<img src='./imgs/pre2.jpg' title='Pesca' />
		<a href='' title='Tigre'><img src='./imgs/pre3.jpg' /></a>
		<img src='./imgs/pre4.jpg' title='Lago' />
		<a href='' title='Abstract'><img src='./imgs/pre5.jpg' /></a>
	</div>
	
	<div id='top'>
		<a href='' title='Balletto'><img src='./imgs/pre1.jpg' /></a>
		<img src='./imgs/pre2.jpg' title='Pesca' />
		<a href='' title='Tigre'><img src='./imgs/pre3.jpg' /></a>
		<img src='./imgs/pre4.jpg' title='Lago' />
		<a href='' title='Abstract'><img src='./imgs/pre5.jpg' /></a>
	</div>
	
	<div id='bottom'>
		<a href='' title='Balletto'><img src='./imgs/pre1.jpg' /></a>
		<img src='./imgs/pre2.jpg' title='Pesca' />
		<a href='' title='Tigre'><img src='./imgs/pre3.jpg' /></a>
		<img src='./imgs/pre4.jpg' title='Lago' />
		<a href='' title='Abstract'><img src='./imgs/pre5.jpg' /></a>
	</div>
</body>
</html>


scroll.css
Code:
/* Area di scorrimento */
#left {
	width: 400px;
	height: 100px;
	overflow: hidden;
	border: 3px solid black;
	padding: 0px;
	clear:both;
	}

/* Immagini */
#left img {
	height: 100px;
	margin: 0px;
	border: 0px;
	clear:both;
	}
	
/* Area di scorrimento */
#right {
	width: 400px;
	height: 100px;
	overflow: hidden;
	border: 3px solid black;
	padding: 0px;
	clear:both;
	}

/* Immagini */
#right img {
	height: 100px;
	margin: 0px;
	border: 0px;
	clear:both;
	}
	
/* Area di scorrimento */
#top {
	width: 160px;
	height: 300px;
	overflow: hidden;
	border: 3px solid black;
	padding: 0px;
	clear:both;
	}

/* Immagini */
#top img {
	width: 160px;
	margin: 0px;
	border: 0px;
	clear:both;
	}
	
/* Area di scorrimento */
#bottom {
	width: 160px;
	height: 300px;
	overflow: hidden;
	border: 3px solid black;
	padding: 0px;
	clear:both;
	}

/* Immagini */
#bottom img {
	width: 160px;
	margin: 0px;
	border: 0px;
	clear:both;
	}

jquery.imageScroller.js
Code:
///////////////////////////////////////////////////////////////////////
// imageScroller (1.1), Copyright (C) 2008 - 2009 Max Kiusso
//
// Autor :		Max Kiusso - kiussoATgmailDOTcom
// Date :		2008 12 01
// Modified:	2009 11 23
//
// REQUIRES jQuery 1.2+ <http://jquery.com/>
//
// Features:
// 		This software provide to create a multidirectional image
//		scroller with mouse events
//
// Configuration:	$( "#div" ).imageScroller( {options} )
//					
//					options:	speed (millisecond)
//								loading (text)
//								direction (left, right, top, bottom)
//
// New in release 1.1:
//		- bug fix for preload images
///////////////////////////////////////////////////////////////////////

( function( $ ) {
	$.fn.imageScroller = function ( options ) {
		return this.each( function() {
			var $this = $( this );
			var loadImgs = 0;
			
			var opt = $.extend( 
				{ 
					  speed: "2000"
					, loading: "Loading images..." 
					, direction: "left"
				}
				, options || {}
			);
			
			$this.children().hide();
			$this.append(
				"<div style='clear:both; padding: 0px; margin: 0px;'>" + 
				"<div id='loading'>" + opt.loading + "</div>" + 
				"</div>"
			);
			
			$( "img" , $this ).each(
				function () {
					var img = new Image();
					var soc = $( this ).attr( 'src' );
					
					$( img ).load(
						function () {
							loadImgs++;
						}
					).attr( "src" , soc );
				}
			);
			
			var intVal = window.setInterval(
				function () {
					if ( loadImgs == $( "img" , $this ).length ) {
						window.clearInterval( intVal );
						$( "#loading" ).remove();
						$this.children().show();
						var totImg = 0;
			
						$.each(
							  $this.children( ":not(div)" )
							, function () {
								switch ( opt.direction ) {
									case 'left':
									case 'right':
										if ( $( this ).children().length ) {
											$( this ).width( $( this ).children( ":eq(0)" ).width() );
										}
										totImg += $( this ).width();
										break;
									case 'top':
									case 'bottom':
										$( this ).css( "display" , "block" );
										if ( $( this ).children().length ) {
											$( this ).height( $( this ).children( ":eq(0)" ).height() );
										}
										totImg += $( this ).height();
										break;
								}
								
								$( this ).css({
									  margin:  "0px"
									, padding: "0px"
									, clear:   "both"
								});
								
								$( this ).bind(
									  "mouseover"
									, function () {
										$( "div:eq(0)" , $this ).stop();
									}
								).bind(
									  "mouseout"
									, function () {
										scrollStart( $( "div:eq(0)" , $this ) , opt );
									}
								);
								
								$( "div:eq(0)" , $this ).append( $( this ) );
							}
						);
						
						switch ( opt.direction ) {
							case 'left':
								$( "div:eq(0)" , $this ).css( "width" , totImg + "px" );
								break;
							
							case 'right':
								$( "div:eq(0)" , $this ).css( "width" , totImg + "px" );
								$( "div:eq(0)" , $this ).css({
									marginLeft: -( totImg - $this.width() ) + "px"
								});
								break;
								
							case 'top':
								$( "div:eq(0)" , $this ).css( "height" , totImg + "px" );
								break;
								
							case 'bottom':
								$( "div:eq(0)" , $this ).css( "height" , totImg + "px" );
								$( "div:eq(0)" , $this ).css({
									marginTop: -( totImg - $this.height() ) + "px"
								});
								break;
						}
	
						scrollStart( $( "div:eq(0)" , $this ) , opt );
					}
				}
				, 100
			);
			
			function scrollStart ( $scroll , opt ) {
				switch ( opt.direction ) {
					case 'left':
						var pos = -( $scroll.children( ":eq(0)" ).width() );
						var spd = opt.speed - ( Math.abs ( parseInt( $scroll.css( "marginLeft" ) ) ) * ( opt.speed / $scroll.children( ":eq(0)" ).width() ) );
						break;
						
					case 'right':
						var pos = -( $scroll.width() - $scroll.parents( "div:eq(0)" ).width() ) + $scroll.children( ":last" ).width();
						var spd = opt.speed - ( ( $scroll.children( ":last" ).width() - ( Math.abs ( parseInt( $scroll.css( "marginLeft" ) ) ) - Math.abs ( pos ) ) ) * ( opt.speed / $scroll.children( ":last" ).width() ) );
						break;
						
					case 'top':
						var tos = -( $scroll.children( ":eq(0)" ).height() );
						var spd = opt.speed - ( Math.abs ( parseInt( $scroll.css( "marginTop" ) ) ) * ( opt.speed / $scroll.children( ":eq(0)" ).height() ) );
						break;
						
					case 'bottom':
						var tos = -( $scroll.height() - $scroll.parents( "div:eq(0)" ).height() ) + $scroll.children( ":last" ).height();
						var spd = opt.speed - ( ( $scroll.children( ":last" ).height() - ( Math.abs ( parseInt( $scroll.css( "marginTop" ) ) ) - Math.abs ( tos ) ) ) * ( opt.speed / $scroll.children( ":last" ).height() ) );
						break;
				}
				
				$scroll.animate(
					{
						  marginLeft: ( pos || "0" ) + "px"
						, marginTop: ( tos || "0" ) + "px"
					}
					, spd
					, "linear"
					, function () {
						switch ( opt.direction ) {
							case 'left':
								$scroll.append( $( this ).children( ":eq(0)" ) );
								$scroll.css( "marginLeft" , "0px" );
								break;
								
							case 'right':
								$scroll.prepend( $( this ).children( ":last" ) );
								$scroll.css( "marginLeft" , -( $scroll.width() - $scroll.parents( "div:eq(0)" ).width() ) + "px" );
								break;
								
							case 'top':
								$scroll.append( $( this ).children( ":eq(0)" ) );
								$scroll.css( "marginTop" , "0px" );
								break;
								
							case 'bottom':
								$scroll.prepend( $( this ).children( ":last" ) );
								$scroll.css( "marginTop" , -( $scroll.height() - $scroll.parents( "div:eq(0)" ).height() ) + "px" );
								break;
						}
						
						scrollStart( $scroll , opt );
					}
				);
			};
		});
	};
})(jQuery);

test.js
Code:
$(
	function () {
		$( "#left" ).imageScroller( {loading:'Wait please...'} );
		
		$( "#right" ).imageScroller( {speed:'4000', direction:'right'} );
		
		$( "#top" ).imageScroller( {direction:'top'} );

		$( "#bottom" ).imageScroller( {speed:'3500', direction:'bottom'} );
	}
)

voor een voorbeeldhttp://moffia.nl/slide/index.htm
gaat om de bovenste balk

complete script
Bekijk bijlage imageScroller_jquery_plugin.zip

is er iemand die voor mijn de paginas zo kan aan passen dat ik de <div id='left'>
20 x onder elkaar krijg werkend
plaatjes pas ik zelf wel aan en link naar websites
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan