0

I have downloaded WordPress theme and I want to modify it for my needs. So my problem is: There is slideshow in the theme and it's loading the images that are showing one after another. I posted the code below, but the part that we are interested in, is the part where we assign the locations to the images. Let's say that I have only one image: If I have that image somewhere on my server I can load it in the slideshow if I add the path of the location on the server http://myServer/path/to/the/image.jpg, for that image. I tried that and it's working. The problem is that the image I want to load is on the other external URL, so when I replace that line with http://myOtherServer/path/to/the/image.jpg the image is not showing.

The error that I got at console is:

Uncaught Error: Syntax error, unrecognized expression: http://myOtherServer/path/to/the/image.jpg

This is the jQuery code in my .php script:

$j(document).ready(function(){     

    $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
    $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
    $j('#kenburns').attr('width', $j(window).width());
    $j('#kenburns').attr('height', $j(window).height());

    $j(window).resize(function() {
        $j('#kenburns').remove();
        $j('#kenburns_overlay').remove();

        $j('body').append('<canvas id="kenburns"></canvas>');
        $j('body').append('<div id="kenburns_overlay"></div>');

        $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
        $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
        $j('#kenburns').attr('width', $j(window).width());
        $j('#kenburns').attr('height', $j(window).height());
        $j('#kenburns').kenburns({
            images: "http://myServer/path/to/the/image.jpg", 
            frames_per_second: 30,
            display_time: 5000,
            fade_time: 1000,
            zoom: 1.2,
            background_color:'#000000'
        });
    });
    $j('#kenburns').kenburns({
        images: "http://myServer/path/to/the/image.jpg",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });             
});

I also tried adding:

var imgS = new Image();
imgS.src = 'http://myOtherServer/path/to/the/image.jpg';

and then replace the path with:

images: imgS,

and it's giving me the error:

Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".

btw. on the top of my .php script I have:

header("content-type: application/x-javascript");

So the general questin is: How can I get the images that are stored on another server within my jQuery code?

EDIT 1:

This is the part inside kenburns where probably the images are requested:

$.fn.kenburns = function(options) {
...

        var image_paths = options.images;
        var images = [];
        $(image_paths).each(function(i, image_path){
            images.push({path:image_path,
                         initialized:false,
                         loaded:false});
        });
...
}

EDIT 2:

I also tried to create <img src="http://myOtherServer/path/to/the/image.jpg"/> tag and I passed that as on object but again I got the error:

 Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".
delux
  • 1,694
  • 10
  • 33
  • 64
  • Can you indicate specifically what line of code is causing that error? I dont see "myOtherServer" anywhere in your main block of code. – jamis0n Mar 22 '14 at 16:46
  • Also the even more important question is what code is run by `$j.fn.kenburns` ? – jamis0n Mar 22 '14 at 16:50
  • The code that is posted is working. The problem is that when I replace `http://myServer/path/to/the/image.jpg` into `http://myOtherServer/path/to/the/image.jpg` then is not working. So it's working with the images from current server, but not with the ones from external URL. – delux Mar 22 '14 at 16:52
  • I didn't posted all the code because it's part of WordPress theme and it is huge. But the basic problem is loading the images from other URLs. I'am sure that the code which is not posted is not causing this problem, because with URLs from my server is working good :) – delux Mar 22 '14 at 16:55
  • OK, let me clarify my 2 questions then: 1) Which line of code above results in the error? Is it `$j('#kenburns').kenburns()`? 2) What function inside `kenburns` is requesting the image? It sounds like the cross domain request isn't being allowed inside that function. – jamis0n Mar 22 '14 at 17:04
  • 1) These lines are causing the error: When I change `images: "http://myServer/path/to/the/image.jpg",` into `images: "http://myOtherServer/path/to/the/image.jpg",` then I have the error. 2) I made an Edit into my post – delux Mar 22 '14 at 17:26
  • @protector If an `img` element was placed into `html` document with `src` set to `http://myOtherServer/path/to/the/image.jpg`, does image load without error? Thanks. – guest271314 Mar 22 '14 at 17:47
  • @guest271314 Yes, then there is no error. The image is shown. – delux Mar 22 '14 at 17:54
  • @protector Not certain about the operation of `$.fn.kenburns` function, never tried. Though, if images can load into html document, one option may be to load all desired images from "myOtherServer" into an element on html page, for example `element#otherImages`, set css to `display:none`, then change `images` (url variable, or path) to `#otherImages`. Images would be already present on page, same `domain`, not `external`, trying for `$.fn.kenburns` to pull images from same page. Just sharing a potential option that could possibly be tried. – guest271314 Mar 22 '14 at 18:10

1 Answers1

0

Try this

html

<div id="otherImages" style="display:none !important;">
<img src="http://myOtherServer/path/to/the/image.jpg" />
</div>

Edit

js (not tried $.fn.kenburns before)

$j('#kenburns').kenburns({
        images: "http://webpage.domain" + "#otherImages",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });
guest271314
  • 1
  • 15
  • 104
  • 177
  • It's not working. It's giving me: `Uncaught Error: Syntax error, unrecognized expression: http://myServer#otherImages`. When I tries just `"#otherImages"` it is giving me the error from before `Resource interpreted as Image but transferred with MIME type text/html:....` – delux Mar 22 '14 at 18:29
  • @protector Could entire `slideshow` js be posted? Have checked `file type` of `images` at server location? – guest271314 Mar 22 '14 at 18:40
  • [There](http://www.2shared.com/document/tFB-9PPE/kenburns.html) it is. It's too large for posting, that is why I attached the document. And what do you mean by that: to check the `file types` of `images` at server location? – delux Mar 22 '14 at 18:57
  • @protector Same as https://github.com/toymakerlabs/kenburns/blob/master/js/kenburns.js? Not certain about issue. Could try save file to working url/server? – guest271314 Mar 22 '14 at 19:10
  • Sorry but I didn't understand you. You are proposing that I should save the file from github on my server? – delux Mar 22 '14 at 19:16
  • @protector Please forgive. Do not have solution to requirement, as of yet. Previous comment was perhaps try prospective option of saving image or images to working url/server. Is the `kenburns.js` used in posts same as `kenburns.js` at github? – guest271314 Mar 22 '14 at 19:22
  • I can't save them because there are a lot of them and that is not good solution. And, yes is used same as that one at github. – delux Mar 22 '14 at 19:29
  • @protector Good question. Will continue to try potential options and comment/post here, if that is ok? – guest271314 Mar 22 '14 at 19:33
  • Yes, sure. Any help will be appreciated. – delux Mar 22 '14 at 19:35
  • @protector Have tried `images : working_url , external_url` with comma between urls? – guest271314 Mar 22 '14 at 19:46
  • I solved the problem. The problem was that `image:` was expecting an array and for testing I was using only one image. So when I put `image:[http://myOtherServer/path/to/the/image.jpg]` then it was working. Silly mistake. Anyway thanks for your time. – delux Mar 23 '14 at 12:04
  • @protector Nice. Can the array accept more than 1 url? Thanks for sharing – guest271314 Mar 23 '14 at 15:48
  • Yes. If we have an array of elements we can have either `image: arrayURLs` or `image: [firstUrl, secondUrl, ..., lastUrl]` – delux Mar 23 '14 at 18:07