Examples: Simple Javascript XML Slideshow

Product: Simple Javascript XML Slideshow| Use the Generator| Go to Examples|
Go to Example 1 to test all the transitions.

SJXS: Generator

Javascript Generator For Slideshows| Back to top
General
*
More Options [+]
Settings

All values start with the default settings.

*
*
*
More Options [+]
CSS Styles
*
  x  px
*
find a color here
find a color here
More Options [+]
Generated Output - Seperated

Header Files

Javascript

Html

CSS

XML File

Generated Output - Combined

SJXS: Example 1

Transition Options |
| Back to top

fade

This example allows you to check out all the transitions and the way you can manipulate those examples. Hopefully this is helpful at seeing the difference between your options. The transitions are also slower than normal so you can see more of what is happening. And the stop on click setting is turned on. So if you click on the previous or next buttons it will stop the slideshow from continuing automatically Show example code below to see the code that is used for whichever transition you choose.

Check the html | Show Example Code

Updated from example above

Header Files

Include your javascript and css stylesheets in the <head> tag of your html page.

<script src="your/path/jquery.1.4.min.js" type="text/javascript"></script>
<script src="your/path/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="your/path/timer.min.js" type="text/javascript"></script>
<script src="your/path/jquery.sjxs.1.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="your/path/css/styles.css" type="text/css" media="screen" />

HTML

Place this wherever you are putting the slideshow

<div class="exampleOne-a">	
	<!-- !start of slider -->
	<div class="sjxs_sliding_content">
	  	
    </div>
    <!-- !end of slider -->
</div>

Javascript

Setup the code to create this slideshow. Place this either in the <head> or right above the closing </body> tag. For this example we will just use the same images. 

<script type="text/javascript"> 
	$(document).ready(function() {
		$('.exampleOne-a').simple_js_xml_slideshow({ 
			xml_url: "images/slideshow/show.xml.php",
			transition_speed: 547,
			transition: 'fade',
			stop_on_click: 'false'
		});
		
	});
</script>

CSS

This is an example of changing some of the css to accommodate a look or desired placement of the slideshow within a theme or website. The code below would go at the end of your slideshow css file and would override the base settings in the stylesheet.

.exampleOne-a .sjxs_sliding_content {
	top:274px;
	width:228px;
}

.exampleOne-a .inside-title{
	background-color:gray;
	color:white;
	display:block;
	margin:0 auto;
	padding:4px 5px;
	position:relative;
	text-align:center;
	top:274px;
	width:228px;
	z-index:500;
	
	filter:alpha(opacity=74);
	-moz-opacity:0.74;
	-khtml-opacity: 0.74;
	opacity: 0.74;
}

XML File

This is the xml file that was used for these galleries. Pretty basic file and easy to setup. The documentation has examples of how to generate dynamic xml files for you.

<gallery>
	
	<image>images/slideshow/01_slide.jpg</image>
		
	<image>images/slideshow/02_slide.jpg</image>
			
	<image>images/slideshow/03_slide.jpg</image>
		
	<image>images/slideshow/04_slide.jpg</image>
	
	<image>images/slideshow/05_slide.jpg</image>
		
</gallery>

SJXS: Example 2

Utilizing the basic settings | Load Examples| Back to top
load_example

This example isn't changing any of the settings except for the transition. It's one of the wipe transitions and base transition speed being used. As well as the base css styles that are used for the look.

Check the html | Show Example Code

Header Files

Include your javascript and css stylesheets in the <head> tag of your html page.

<script src="your/path/jquery.1.4.min.js" type="text/javascript"></script>
<script src="your/path/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="your/path/timer.min.js" type="text/javascript"></script>
<script src="your/path/jquery.sjxs.1.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="your/path/css/styles.css" type="text/css" media="screen" />

HTML

Place this wherever you are putting the slideshow

<div class="exampleOne">	
	<!-- !start of slider -->
	<div class="sjxs_sliding_content">
	  	
    </div>
    <!-- !end of slider -->
</div>

Javascript

Setup the code to create this slideshow. Place this either in the <head> or right above the closing </body> tag.

<script type="text/javascript"> 
	$(document).ready(function() {
		$('.exampleTwo').simple_js_xml_slideshow({ 
			xml_url: "images/slideshow/show.xml.php",
			transition: 'picketFenceCornerWipe'
		});
	});
</script>

XML File

This is the xml file that was used for these galleries. Pretty basic file and easy to setup. The documentation has examples of how to generate dynamic xml files for you.

<gallery>
	
	<image>images/slideshow/01_slide.jpg</image>
		
	<image>images/slideshow/02_slide.jpg</image>
			
	<image>images/slideshow/03_slide.jpg</image>
		
	<image>images/slideshow/04_slide.jpg</image>
	
	<image>images/slideshow/05_slide.jpg</image>
		
</gallery>

SJXS: Example 3

Changing the transitions and size | Load Examples| Back to top
load_example
load_example

This example uses two slideshows next to each other showing how to make some basic css alterations to fit a look or web page. Another good example of making this slideshow fit your look would be at the top of this page.

Check the html | Show Example Code

Header Files

Include your javascript and css stylesheets in the <head> tag of your html page.

<script src="your/path/jquery.1.4.min.js" type="text/javascript"></script>
<script src="your/path/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="your/path/timer.min.js" type="text/javascript"></script>
<script src="your/path/jquery.sjxs.1.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="your/path/css/styles.css" type="text/css" media="screen" />

HTML

Place this wherever you are putting the slideshow

<div class="exampleThree-a">	
	<!-- !start of slider -->
	<div class="sjxs_sliding_content">
	  	
    </div>
    <!-- !end of slider -->
</div>

<div class="exampleThree-b">	
	<!-- !start of slider -->
	<div class="sjxs_sliding_content">
	  	
    </div>
    <!-- !end of slider -->
</div>

Javascript

Setup the code to create this slideshow. Place this either in the <head> or right above the closing </body> tag. For this example we will just use the same images.

<script type="text/javascript"> 
	$(document).ready(function() {
		$('.exampleThree-a').simple_js_xml_slideshow({ 
			xml_url: "images/slideshow/show.xml.php",
			transition_time: 3,
			transition_speed: 1500,
			random_start: 'true'
		});
		$('.exampleThree-b').simple_js_xml_slideshow({ 
			xml_url: "images/slideshow/show.xml.php",
			transition_time: 3,
			transition_speed: 1500,
			random_start: 'true'
		});
	});
</script>

CSS

This is an example of changing some of the css to accommodate a look or desired placement of the slideshow within a theme or website. The code below would go at the end of your slideshow css file and would override the base settings in the stylesheet.

.exampleThree-a .sjxs_sliding_content, .exampleThree-b .sjxs_sliding_content {
	position:relative;
	float:left;
	width:300px;
	height:145px;
	overflow:hidden;
	border-bottom:2px ridge #AAAAAA;
	border-top:2px groove #AAAAAA;
}

.exampleThree-b .sjxs_sliding_content {
	float: right;
}

XML File

This is the xml file that was used for these galleries. Pretty basic file and easy to setup. The documentation has examples of how to generate dynamic xml files for you.

<gallery>
	
	<image>images/slideshow/01_slide.jpg</image>
		
	<image>images/slideshow/02_slide.jpg</image>
			
	<image>images/slideshow/03_slide.jpg</image>
		
	<image>images/slideshow/04_slide.jpg</image>
	
	<image>images/slideshow/05_slide.jpg</image>
		
</gallery>