Fetch URL from XML with jQuery and PHP - Jquery Slideshow

Question

Im using the jQuery Nivo Slider, its pretty simple to setup:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

However I want to be able to define the Images and captions in a seperate file, perhaps an XML file or text file. I'd like to store the images in a fairly readable fashion so that virtually anyone could update the file if need be.

So question is how can I generate HTML in the same structure as used above by generated automatically via PHP from a file?

I need to generate a list of images with some options:

I supposse the options are:

IMG src
href
alt
title (The title relates to the caption)
caption (The actual caption text)
Option in the PHP to order the images based on an ID

Only the IMG src, alt and title would be compulsary with the remaining fields optional.

I imagine XML is going to be the easiest way to define these options, but I have no idea how to go about creating my own XML. I've already written down the following but I need to know how to correctly define this as XML. Eg Is there a namespace or something I need to add to the top of the file to create valid XML?

<images>
  <image>
    <id>1</id>
    <source>images/slide1.jpg</source>
    <alt>This is an image</alt>
    <title>caption1</title>
    <href>http://url.com</href>
  <image>
  <image>
    <id>3</id>
    <source>images/slide3.jpg</source>
    <alt>This is an image</alt>
    <title>caption3</title>
    <href>http://url.com</href>
    <caption>This is an example of a HTML caption.</caption>
  <image>
  <image>
    <id>2</id>
    <source>images/slide2.jpg</source>
    <alt>This is an image</alt>
    <title>caption2</title>
    <href>http://url.com</href>
  <image>
</images>

So thats potentially the XML defined to store the slider details.

Now I need to read the XML to generate the HTML:

All the images have to be stored between the <div id="slider"> images </div> and the captions have to be defined outside of this .

So I need to fetch the images first in the corret order based on the ID <id> . Something like (Not real code).

foreach image as images {
  $id = <id>;
  $src = <src>;
  $title = <title>; 
  $alt = <alt>;
  $href = <href>;
  orderby $id;

  <!--HERE I NEED TO DO SOME KIND OF if HERE SO THAT ONLY THOSE ELEMENTS
      THAT ARE POPULATED IN THE XML ARE USED
   -->

  echo "<a href='$href'><img src='$src' alt='$alt' title='$title' /></a>";

}

The above would loop 3 times based on the above XML, and output the full HTML ready for a caption.

So to generate the captions I need to create this:

foreach images as image {
  if $title = * {
    echo "<div id='$title' class='nivo-html-caption'>
            This is an example of a HTML caption.
          </div>"
  }
}

I beleive the Title give to the <img> is the relative to the ID given to the nivo-html-caption ID .

I realise I've written a lot here but just done have the understanding of XML to put the file together in a valid way.

How can I fetch the file using PHP?

How can I loop through the XML to generate the Images in HTML and put them in the correct order?

How can I generate the HTML captions seperatly?

Any help greatly appreciated!

Answer 1

Personally, I'd use JSON to store this information as its very simplified. Using php or perl, you just loop through the array, and this information can be pushed to the users browser if need be.

Answer 2

All of this can be found on David Powers's book OOP php, these examples are his in the book fyi:

How can I fetch the file using PHP?

$xml = simplexml_load_file($location);

How can I loop through the XML to generate the Images in HTML and put them in the correct order? example of xml structure:

<book isbn13="978-1-43020-991-1">
<title>PHP Object Oriented Solutions</title>
<author>David Powers</author>
<publisher>friends of ED</publisher>
<description>Introduces the key concepts . . . </description>
</book>

ex:

$xml = simplexml_load_file('inventory.xml');
echo $xml->book[0]->title;

And it should show you, PHP Object Oriented Solutions

ex:

$xml = simplexml_load_file('inventory.xml');
foreach ($xml->book as $book) {
echo $book->title . '<br />';
}

This loops through each books if you have more than one .

How can I generate the HTML captions seperatly?

I assume you can have a separate foreach loop that is used for grabbing the captions from the xml.

Yeah, I think this is enough for you to google tutorial on simplexml functions and stuff. Good luck.

Oh, it can make your xml file simpler, less level of nested tags, by embedding html into the xml:

<url> <![CDATA[ <a href="url.com">URL</a> ]]> </url>

So with that perhaps it'll make parsing your xml file a lot easier.

Fetch URL from XML with jQuery and PHP - Jquery Slideshow

Question

2 answers

solution1
0 2010-12-17 23:24:23

solution2
0 2010-12-18 03:28:28

Fetch URL from XML with jQuery and PHP - Jquery Slideshow

Question

2 answers

solution1 0 2010-12-17 23:24:23

solution2 0 2010-12-18 03:28:28

solution1
0 2010-12-17 23:24:23

solution2
0 2010-12-18 03:28:28