Search jQuery

jQuery Forum

jQuery load image from XML

in Using jQuery • 10 years ago

Hi i am just starting using jquery. I want to load images from xml. I,ve got a script but it only load a single image, and i wan't to load all images called lightbox in XML.

here is an xml file:

<?xml version="1.0" encoding="utf-8"?>
<images>
<image source="Zdjecia/Galeria/Kategoria1/Miniaturki/image1.jpg" lightbox="Zdjecia/Galeria/Kategoria1/Duze/image1.jpg">
<lightbox>Zdjecia/Galeria/Kategoria1/Duze/image1.jpg</lightbox>
</image>
<image source="Zdjecia/Galeria/Kategoria1/Miniaturki/image2.jpg" lightbox="Zdjecia/Galeria/Kategoria1/Duze/image2.jpg">
<lightbox>Zdjecia/Galeria/Kategoria1/Duze/image2.jpg</lightbox>
</image>
<image source="Zdjecia/Galeria/Kategoria1/Miniaturki/image3.jpg" lightbox="Zdjecia/Galeria/Kategoria1/Duze/image3.jpg">
<lightbox>Zdjecia/Galeria/Kategoria1/Duze/image3.jpg</lightbox>
</image>
</images

and here is my script in Html :

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
$.get("xml/kategoria1.xml",{},function(xml){
$('image',xml).each(function(i) {
lightbox = $(this).find("lightbox").text();
openLightbox(lightbox)
});
});
});
function openLightbox(path) {
$.prettyPhoto.open(path);

I forget to add i'm using prettyphoto.
If anyone can help me please write me back

Greetings Krystian.

Replies(30)

jakecigar

Re: jQuery load image from XML

10 years ago

The example at the bottom of the page @ prettyPhoto documentation suggests that you build 3 arrays them call $.prettyPhoto.open.

api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];

api_titles = ['Title 1','Title 2','Title 3'];

api_descriptions = ['Description 1','Description 2','Description 3']

$.prettyPhoto.open(api_images,api_titles,api_descriptions);

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Yes i saw that but i don't wan't to write all images in html file.. if there is a 100 of image...
So thats why i want to load from xml because i have got an administration panel that add picture to xml file.

jakecigar

Re: Re: jQuery load image from XML

10 years ago

The code I posted how they did it in the demo.

You have to loop through the XML, building those arrays.

Then call

$.prettyPhoto.open(api_images,api_titles,api_descriptions);

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Ok now i change a little code, it loks like that :

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
});
function openLightbox(path) {
$.get("xml/kategoria1.xml",{},function(xml){
$('image',xml).each(function(i) {
lightbox = $(this).find("lightbox").text();
//openLightbox(lightbox)
$.prettyPhoto.open(lightbox);
});
});

And now it open single image and always first image from xml, any ideas how to load rest images from xml ??

jakecigar

Re: jQuery load image from XML

10 years ago

from what I read, you want something like this.

jQuery(document).ready(function($) {
$.get("xml/kategoria1.xml",{},function(xml){
var api_images=[],
api_titles=[],
api_descriptions=[];
$('image',xml).each(function(i,image) {
api_images.push( $(image).attr('source') );
api_titles.push('');
api_descriptions.push('');
})
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
})
});

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Hymm it is interesting i need to call it in function openLightbox because that is a function which i send from flash. Will be that wor if i create something like this ??

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
});
function openLightbox(path) {
$.get("xml/kategoria1.xml",{},function(xml){
var api_images=[],
$('image',xml).each(function(i,image) {
api_images.push( $(image).attr('lightbox') );
})
$.prettyPhoto.open(api_images);
})

i try to do that but something is wrong

kpax06

Re: jQuery load image from XML

10 years ago

Haha :D i do something like this :

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
});
function openLightbox() {
$.get("xml/kategoria1.xml",{},function(xml){
images= new Array();
$('image',xml).each(function(i) {
image = $(this).find("lightbox").text();
images.push(image);
});
$.prettyPhoto.open(images);
});

and it load all lightbox images from xml:D
but now i have last one question because i send from flash function and a single image "path" and i want to open path image first and then images from xml. any ideas how to add path image to
$.prettyPhoto.open(images);

i tryied do something like this but it doesn't work $.prettyPhoto.open(path, images);

kpax06

Re: jQuery load image from XML

10 years ago

yes!! it is working with this :D :

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
});
function openLightbox(path) {
$.get("xml/kategoria1.xml",{},function(xml){
images= new Array();
images.push(path);
$('image',xml).each(function(i) {
image = $(this).find("lightbox").text();
images.push(image);
});
$.prettyPhoto.open(images);
});
}

and it load all images that i want but it duplicate always one picture, beacause i send it from flash and then it load again same picture from xml it is possible to delete one of this pictures ??

kpax06

Re: jQuery load image from XML

10 years ago

Ok this script works :

jQuery(window).ready(function($) {
$.fn.prettyPhoto();
});
function openLightbox(path) {
$.get("xml/kategoria1.xml",{},function(xml){
images= new Array();
images.push(path);
$('image',xml).each(function(i) {
image = $(this).find("lightbox").text();
images.push(image);
});
$.prettyPhoto.open(images);
});
}

But it always start loading images from begining. Is it possible to load images from path??

Like when i clicked 10th image in the grid i want to open this image and have 9 images previous and n images next.

please help i'm almost done to do it.

Greetings

jakecigar

Re: jQuery load image from XML

10 years ago

Are you sure you need lines 3-6?

What is path?

Do you have a page where I can see it all in action?

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Oh yea you have right i don't need this lines i can do something like this :

function openLightbox(path) {
$.fn.prettyPhoto();
$.get("xml/kategoria1.xml",{},function(xml){
images= new Array();
images.push(path);
$('image',xml).each(function(i) {
image = $(this).find("lightbox").text();
images.push(image);
});
$.prettyPhoto.open(images);
});
}

I can't show you the website because I do not have access to the serwer at this moment. I only test it on local serwer. But i can explain.

I have a thumbnail grid create in actionscript3.0 in flash. And i want to open a large image in prettyphoto after click on thumbnail. Path is an image that i send from flash for that i use :

function itemClickHandler(event:GridEvent):void
{
if (ExternalInterface.available) {
ExternalInterface.call('openLightbox', event.data.lightbox);
}
}

openLightbox is the function that i send from flash and event.data.lightbox is a "path" it is a picture that i send from xml using flash param lightbox.

<image source="Zdjecia/Galeria/Kategoria1/Miniaturki/image3.jpg" lightbox="Zdjecia/Galeria/Kategoria1/Duze/image3.jpg">

And all i want to do is that after click to thumbnail i want to open a large image in prettyphoto with buttons previous and next for load rest of lightbox images.

And i try to load images from xml using jQuery, and it works ok but it always starts loading from begining, so always path image is first and then all images from the begining to end. I want to load images that are before and after path. As i said before when i wan't to click on 10th image i want to have 9 images previous and n next. Is it possible to do that ??

jakecigar

Re: jQuery load image from XML

10 years ago

Nope, that did not explain what path is.

Is it a directory path as in "foo/bar/" ?

is it an extra picture, as in Zdjecia/Galeria/Kategoria1/Duze/imageX.jpg?

You seem to be using it as if it is a picture.

Put the files on some server. Then we might be able to better understand the problem.

Calling a plugin

$.fn.prettyPhoto();

is usually wrong. I don’t see any call like that in the prettyPhoto documentation.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Ok i've got an access to serwer ;)

Here is link :

http://ufiartist.pl/portfolio/portfolio.html

go to tab portfolio and then to Kategory1 and click for thumbnail ;) You will see effect.

here is an explain of path :

<?xml version="1.0" encoding="utf-8"?>
<images>
<image source="zdjecia/galeria/kategoria1/miniaturki/image1.jpg" lightbox="zdjecia/galeria/kategoria1/duze/image1.jpg" > // here is a path it is an image that i sen from flash "lightbox"
<lightbox>zdjecia/galeria/kategoria1/duze/image1.jpg</lightbox> // here is param lightbox that i read from jQuery it is a same picture
</image>

Greetings
Krystian

jakecigar

Re: jQuery load image from XML

10 years ago

http://ufiartist.pl/portfolio/portfolio.html is a flash page.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

yes it is and i'm calling function openLightbox from flash via externalinterfacecall and rest have to be in html file

jakecigar

Re: jQuery load image from XML

10 years ago

I haven’t got a clue on how to debug flash.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

But it have to be in html file.

This code:

function itemClickHandler(event:GridEvent):void
{
if (ExternalInterface.available) {
ExternalInterface.call('openLightbox', event.data.lightbox);
}
}

openLightbox is a function that i'm calling

event.data.lightbox it is lightbox param :

<image source="zdjecia/galeria/kategoria1/miniaturki/image1.jpg" lightbox="zdjecia/galeria/kategoria1/duze/image1.jpg" >

for every picture is different lightbox, it is a big picture.

And "path" is that evend.data.lightbox

I wan't to open this image and rest load from xml because from flash i can send only a image or index of image

jakecigar

Re: jQuery load image from XML

10 years ago

If you can put up a page without flash, I’ll take a look. I can debug/trace/fix JavaScript and HTML.

You can always post again and mention that it’s inside flash. Someone may know how to debug JavaScript inside flash.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Ok but thank you for your help :)

Is it possible in jQuery to getItembyid ?? Because from flash i don't have to send an image o i can send an index of image, number of clicked image.

jakecigar

Re: jQuery load image from XML

10 years ago

$('#id') give you a jQuery of that single id.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

So in xml file i have to do something like this? :

<?xml version="1.0" encoding="utf-8"?>
<images>
<image source="zdjecia/galeria/kategoria1/miniaturki/image1.jpg" lightbox="zdjecia/galeria/kategoria1/duze/image1.jpg">
<id>1</id>
<lightbox>zdjecia/galeria/kategoria1/duze/image1.jpg</lightbox>
</image>

jakecigar

Re: jQuery load image from XML

10 years ago

ids don’t exist as keys in XML. There is rarely a need for the XML to have ids. This is a more natural XML

<?xml version="1.0" encoding="utf-8"?>
<images>
<image
source="zdjecia/galeria/kategoria1/miniaturki/image1.jpg" lightbox="zdjecia/galeria/kategoria1/duze/image1.jpg"
/>
</images>

This part is redundant.

<lightbox>Zdjecia/Galeria/Kategoria1/Duze/image1.jpg</lightbox>

You can access the images like this:

$('image',xml).each(function(i) {
alert ($(this).attr(’source’))
alert ($(this).attr(’ lightbox’))
});

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

ok so i can change it to this:

function openLightbox(path) {
$.fn.prettyPhoto();
$.get("xml/kategoria1.xml",{},function(xml){
images= new Array();
images.push(path);
$('image',xml).each(function(i) {
alert ($(this).attr(’source’))
alert ($(this).attr(’ lightbox’))
images.push(image);
});
$.prettyPhoto.open(images);
});
}

but now how to define var image i can't do it like this : image = alert ($(this).attr(’ lightbox’))

sorry for this questions but i'm begginer in jQuery

jakecigar

Re: jQuery load image from XML

10 years ago

<script type="text/javascript">
function openLightbox(path) {
$.fn.prettyPhoto();
$.get("xml/kategoria1.xml",{},function(xml){
var images= [];
// images.push(path);
$('image',xml).each(function(i){
images.push($(this).attr('source'));
});
$.prettyPhoto.open(images);
});
}
$(openLightbox)
</script>

From a working demo I made at http://home.jejaju.com/play/prettyPhoto_uncompressed_3/xml.html

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

ok thank you :) it working :)

Now i'm thinking about how to add id for each image maybe this is the way how to open images propertly not from beggining

jakecigar

Re: jQuery load image from XML

10 years ago

There is no reason to add ids. The images are removed after they are used.

$(openLightbox)

runs it at the document ready time.

$('button').click(openLightbox) // runs it when a button is clicked.

You can run it any time by calling openLightbox()

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Ok i have something like this :

function openLightbox(path) {
$.fn.prettyPhoto();
$.get("xml/kategoria1.xml",{},function(xml){
var images= [];
images.push(path);
$('image',xml).each(function(i) {
images.push($(this).attr('lightbox'));
});
$.prettyPhoto.open(images);
});
}

It works :)

But i have a thumbnails grid so i want to do that :

when i click to 5th thumbnail i want to open it in large size and have four images previous and n images next.

I don't want to load all images always from beginning. It is not that bad when there is 30 images but if there will be a 100 thumbnails so what if i click on 50th thumbnail and after click next it will load images from begining.

So i think if i add id per each image, I can load images from clicked thumbnail not always from first.

But i don't know how to do it :/ i'm trying but without success

jakecigar

Re: jQuery load image from XML

10 years ago

I don’t think this plugin has those features.

The code we wrote doesn’t actually use thumbnails. Just resized full pictures. There would be no savings.

You would have to write your own code or make modifications to prettyPhoto to make it scroll the ’thumbnails’.

JΛ̊KE

kpax06

Re: jQuery load image from XML

10 years ago

Ok :/
Maybe i can do it with another lightbox like lightbox ++

I create something like this :

function openLightbox(source)
{
var link = document.createElement('a');
link.setAttribute('href',source);
link.setAttribute('rel','lightbox');
Lightbox.prototype.start(link);
}

And it load with lightbx++ only a single image from xml.

I don't know that we understand good.

Look when you enter to my site an go to tab "portfolio" and then go to "kategory1" you will se a thumbnail grid. This thumbnail grid load from xml atribut "source", source is an thumbnail in xml.

lightbox is a large image in xml. And when you click on image in thumbnail grid it sends to html file function 'openLightbox' and large image for this thumbnail atribut "lightbox".

And i want to do that :

When i click on 3rd thumbnail i want to open a big image for this thumbnail. When lightbox open with this image i want to have buttons previous and next. And when i click next i want to load 4th image not first.

And when i click to button previous in lightbox i want to load 2nd image.

This buttons previous and next are not in my flash content, buttons are in lightbox when it is open.

I want to load pictures in turn 1,2,3,4,5,6,7,8,9.......

and after click on 5th it open large image and on large image are buttons prev and next after click prev i want to load 4th image.

jakecigar

Re: jQuery load image from XML

10 years ago

I suggest you start a new topic specifying that you want to embed the jQuery inside flash.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

jQuery load image from XML

Replies(30)

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Re: jQuery load image from XML

Statistics

Tags

Actions