Simple Javascript XML Slideshow

It should be pretty easy to accomplish adding images for your prev/next buttons. When you place your javascript code for adding the slideshow to your html page there are options for giving the buttons html.

$('.SliderContainer').simple_js_xml_slideshow({
    prev_button: '<img src="http://pathto/your/prev/image/" />',
    next_button: '<img src="http://pathto/your/next/image/" />'
});

And then you will want to edit the CSS , in your stylesheet, that you used/copied for the slideshow. Look for references to .sjxs_next and .sjxs_prev. Then change padding and hover effects, that are in there by default, to be what you need to work with your images.

That’s the easiest way. If you know how to work with CSS , you can use pure CSS . But the method I listed above is easy to manage. If this doesn’t help or isn’t clear enough, feel free to ask any more questions.

Yep, it totally does.

All you need to do is reference whatever html element that you want it to be inside of. (Multiple Slideshows) And then reference xml files that have each of your galleries. (Different Images) There is detailed instructions on how to do it in the documentation that you get with the slideshow.

But below is essentially how it would work. There is also a widget included that you can use to get the html, javascript and an example xml file created for you.

HTML Needed

Place this wherever you want your slideshow to be in your file.

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

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

Javascript Needed

You would place this in your script html tag, wrapped inside a jQuery domReady event.

$('.SliderContainer').simple_js_xml_slideshow({
    xml_url: "js/simple_jxs/simplexmlslideshow.xml" 
});

$('.SliderContainer2').simple_js_xml_slideshow({
    xml_url: "js/simple_jxs/simplexmlslideshow.xml" 
});