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="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<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 link.
</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. E.g. 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!
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.
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[ URL ]]> </url>
So with that perhaps it'll make parsing your xml file a lot easier.
Related
I am trying to call an image in my PHP to an XML file. I have tried to do this many different ways, but have not had much luck. More specifically, I am trying to call img file variable "Image1" to display. I have also sought tutoring, but the tutor was also somehow stumped on this, so any help is appreciated.
Prompt: (a) Create a XML file which contains the description of at least 3 product names, prices, and image file names.
(b) Load the XML file using Php and generate the shopping items: image, name, price and allow order quantity. Hint: Replace the image file names, item names, and prices with the Php codes. The Php codes supply the Php variables which were filled by reading the XML file at the beginning of the page. Then use "echo" verb to show the content of the session variable which contains the file name, item name, and price. The page should have the file extension .php.
//My XML
<?xml version="1.0" encoding="UTF-8"?>
<items>
<object>
<Name>CSU Womens T-Shirt</Name>
<Material>3% Polyester / 97% Cotton</Material>
<Price>$23.99</Price>
<image1>C:\Users\erica\OneDrive\Documents\IST450HW\IMGs\csupic.jpg</image1>
</object>
<object>
<Name>CSU Unisex Hat</Name>
<Material>2% Spandex / 98% Cotton</Material>
<Price>$10.99</Price>
</object>
<object>
<Name>CSU Men's T-Shirt</Name>
<Material>5% Polyester / 95% Cotton</Material>
<Price>$19.99</Price>
</object>
</items>
//My PHP
<?php
$xml = simplexml_load_file("Items.xml");
foreach ($xml as $key => $value) {
foreach ($value as $key => $value) {
echo $key.": ".$value."</br>";
}
}
$result = $xml->$items->$object->$image1;
echo '<img src="'.$result.'" height="100"; "width="100" ;>';
?>
$xml will be an object, im not sure why you are looping through it with a foreach, so ill ignore that bit.
To access the element which you're after you need to do it like:
$result = $xml->object[0]->image1;
echo '<img src="'.$result.'" height="100" width="100"/>';
But your browser won't see that path (or it wont work once you put it elsewhere), so place the image in an accessible location e.g: ./imgs and then change your xml.
For example:
<image1>./imgs/csupic.jpg</image1>
Then the resulting img tag will look like:
<img src="./imgs/csupic.jpg" height="100" width="100"/>
The web server will then be able to serve the file without issues.
Try put image file csupic.jpg in the same dir of php file and if not work change echo line to:
echo '<img src="/'.$result.'" height="100"; "width="100" ;>';
a photographer here with next to none programming experience. I am working on my website and got far enough (yes, I did a lot of searches) but cannot find the answer. Anybody can point me to the right direction?
I want to generate a code for my galleries. I have several different galleries/pages, and I would like to store all src, alt in one xml file, then bring it to a specific page.
SO far I have this
<?xml version="1.0"?>
<catalog>
<img id="pf01">
<src>foodphotography/01</src>
<alt>food1</alt>
</img>
<img id="pf02">
<src>foodphotography/01</src>
<alt>food2</alt>
</img>
<pf id="pf03">
<src>foodphotography/05</src>
<alt>food2</alt>
</pf>
</catalog>
and the php code
<?php
// Loading the XML file
$xml = simplexml_load_file("img.xml");
foreach($xml->children() as $img)
{
echo "<div class='swiper-slide'>\n";
echo "<img src='/images/".$img->src."' alt='".$img->alt."'>\n";
echo "</div>\n";
}
?>
I am trying to display on one page only <img> and on the other <pf>. Right now it displays all 3 images. How do I pick from the xml file only specific images? It looks like I cannot have more than one catalog.
Any better way to do this?
Thank you
There's lots of way you could filter on this, but since you're interested in having them on different pages, then you might just use xpath to filter the children. So to just show the img use the xpath /document/img
<?php
// Loading the XML file
$xml = simplexml_load_file("img.xml");
// swap children for xpath
foreach($xml->xpath('/catalog/img') as $img)
{
echo "<div class='swiper-slide'>\n";
echo "<img src='/images/".$img->src."' alt='".$img->alt."'>\n";
echo "</div>\n";
}
And on your other page, use the xpath /catalog/pf
I have a question regarding XML feeds.
There is a website whitch provides data and they give me 2 links for 2 files
file 1 : Cars_docu.atom
file 2 : Cars.atom
date on file 1 is like this
<entry>
<author>
<name />
</author>
<f:name>Name</f:name>
<f:description>Product name</f:description>
and the second file is like this
<entry>
<title>Volvo</title>
<link rel="alternate" href="#1" />
<author>
<name />
</author>
<id>237370</id>
<updated>2015-08-17T11:44:32Z</updated>
<f:name>Volvo Lamp</f:name>
So as I understand the first file includes name of the filds and the second one includes the data
My question is what is the method of pulling this imformation from both files using a PHP file and gather them into one page ?
and inside the second document there is a 10000 product so how i pull one pacific product only?
I need methods if you have code I will be glad or just tell me where to start
regads
Take a look at the SimpleXML Class:
http://php.net/manual/en/class.simplexmlelement.php
The approach to take is to use file_get_contents to pull the data from the XML pages and then use SimpleXML to parse it into an array.
For example:
<?php
$url = "somewebsite.com/Cars.atom";
$file = file_get_contents($url);
$carsArray = new SimpleXMLElement($file);
foreach ($carsArray->entry as $car) {
echo $car->title; // Would display "Volvo"
}
?>
When I'm first investigating the structure of an XML document that has been parsed into an array I find it useful to use the print_r() function.
From the above, the next simple step is to load both XML doc's and work you way through to build the data you want to display.
Edit if you want to match a specific item
Assuming you are wanting to match the car title to Volvo, this is how you could do it.
<?php
$url = "somewebsite.com/Cars.atom";
$file = file_get_contents($url);
$carsArray = new SimpleXMLElement($file);
// Need to use an array key to get the element, alternatively can loop through each value
if($carsArray->entry[0]->title == "Volvo") {
echo "Car is a Volvo!";
}
?>
Hello everyone I am trying to make a gallery on my website and I am pulling the images/sets from flickr. I am able to load all the sets with this bit of code:
$flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key='.$api.'&user_id='.$user_id.'');
foreach($flickr->photosets->photoset as $ps) {
echo '<img src="http://farm'.$ps['farm'].'.staticflickr.com/'.$ps['server'].'/'.$ps['primary'].'_'.$ps['secret'].'_q.jpg"><br />';
}
With this it will return a list of all the set's main images. However I also would like to add the title above it but the XML output of the title is in $flickr->photosets->photoset->title making it hard for me to get the title above every picture. Is there a easy way to get the title inside the foreach loop for the images but that the title also aligns correctly with the image?
the xml flickr outputs looks like:
<photosets page="1" pages="1" perpage="30" total="2" cancreate="1">
<photoset id="72157626216528324" primary="5504567858" secret="017804c585" server="5174" farm="6" photos="22" videos="0" count_views="137" count_comments="0" can_comment="1" date_create="1299514498" date_update="1300335009">
<title>Avis Blanche</title>
<description>My Grandma's Recipe File.</description>
</photoset>
</photosets>
If it's with the given XML, you can obtain it inside of the foreach loop with $ps->title.
I want to set hyperlink in the image in XML file.
Here is my code of XML file:
<logos>
<logo id="1" name="Abc" path="abc.jpg" x="23" y="4" height="10" width="60"/>
<logo id="2" name="Xya" path="xyz.jpg" x="50" y="`4" height="20" width="40"/>
</logos>
I want to set hyperlink in this image.
XML is a generic data format. It doesn't have any hyperlink capabilities. A specific XML application can (XHTML, for example, has the a element).
If the XML application you are using doesn't include anything to describe hyperlinks, then you need to change it, possibly by importing something from another namespace (such as XLink).
The software that consumes the application will almost certainly have to be updated to add support for the change you make to the language.
I would set an attribute in the node for link_out like:
<logo link_out=""...
Or create a child element to the Logo node if multiple links will ever be in use.
Really hard to understand your need for this.
what XML structure are you following? If you aren't following one, what is stopping you from doing something like:
<logos>
<logo>
<image blah="">
<link blah="">
</logo>
</logos>
Hard to help you when there are a myriad of solutions, but we don't have all the details.
In the XML file, you need to tell it to ignore tags that are intended as html
tags and not tags of the xml structure by enclosing the html using
<![CDATA[ your html ]]>
<urlLink><![CDATA[ Click Here ]]></urlLink>