Decrease Font Size
Increase Font Size
   BLOG

JQuery slideshow with XML

by bryian 8. October 2009 21:03

Simple Gallery with jQuery |

JQuery Simple Controls Gallery |

JQuery slideshow |

JQuery simplegallery.js |

JQuery Image Gallery with XML

Watch this Script in action/ Download

Introduction

I am using the JQuery Simple Controls Gallery from Drive DHTML (dynamic html) & JavaScript code library . One of the requirements is to read the images information from a XML file. After spending some time researching for it, I found the article Reading XML with jQuery. I have put together these two findings and include a brief explanation to it. Hope someone will find this information useful. Comments are welcome.

JQuery Slideshow

Implementation

<script type="text/javascript">
    var myArray = []; //declare and initialize array
/* 
10082009 BT
http://think2loud.com/reading-xml-with-jquery/
Read the slides info into an array from XML and assign the array variable to
the simple slide show.
*/
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "simplegallery_files/sites.xml", //xml file 
			dataType: "xml",
            success: function(xml) {
                var count = 0; //counter
                $(xml).find('site').each(function() {

                    var url = $(this).find('url').text(); //url 
                    var target = $(this).find('target').text(); //_blank, _new
                    var imageURL = $(this).find('imageURL').text(); //location of the image
                    var alt = $(this).find('alt').text(); //alternate text of the image

					//append to array
                    myArray[parseInt(count)] = new Array(imageURL, url, target, alt); 
					
                    count++;
                });

                var mygallery2 = new simpleGallery({
                    wrapperid: "simplegallery2", //ID of main gallery container,
                    dimensions: [728, 90], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
					
                    imagearray: myArray, //assing the array var to here
                    autoplay: [true, 10000, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
                    persist: true,
                    fadeduration: 1000, //transition duration (milliseconds)
                    oninit: function() { //event that fires when gallery has initialized/ ready to run
                    },
                    onslide: function(curslide, i) { //event that fires after each slide is shown
                        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
                        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
                    }
                })
            }
        });

    });
</script>

Sample XML contents

<?xml version="1.0" encoding="iso-8859-1"?>
<sites>

  <site>
    <url><![CDATA[https://www.amazon.com/b?node=283155&tag=asp.net.books-20&camp=0&creative=0&linkCode=ur1&adid=1F4JYCPDSWG3V5JH9GD9&]]></url>
    <target>_new</target>
    <alt>Amazon :: Books</alt>
    <imageURL><![CDATA[https://images-na.ssl-images-amazon.com/images/G/01/associates/2006/books/34percent/us_books_728x90.gif]]></imageURL>
  </site>

  <site>
    <url><![CDATA[http://www.mochahost.com/1160-0-1-29.html]]></url>
    <target>_new</target>
    <alt>MochaHost</alt>
    <imageURL>http://www.mochasupport.com/aff/banners/112_728-4.gif</imageURL>
  </site>

</sites>

IE Fires Onresize When Body Resizes

by Admin 19. July 2009 20:44

IE Fires Onresize When Body Resizes

IE 6.0 Fires Onresize When Button click

 

I have something like this in one of my JavaScript.

window.onresize = function() {
  //do something here
}

It works fine for IE 7.0 and Firefox but not on IE 6.0.

Whenever I click on a button in IE 6.0, it trigger the window.onresize. After doing some research I found this site, which solve my problem. Thanks!

IE Fires Onresize When Body Resizes

Tags: ,

Javascript

Permission denied to call method Location.toString

by Admin 7. July 2009 15:25

Permission denied to call method Location.toString"

 

I was testing a website on a different browser and FireFox throw this ugly error "Permission denied to call method Location.toString"

It puzzled me for a while and I also removed all the Javascript on my site but the error wouldn't go away. The last thing I did was removing the Google ads which required Adobe Flash Player to run.

Then the error disappears. Well if you happen to experience this kind of error the next time, don’t forget to check the type of Google ads displays on your website.

Tags: , ,

Javascript