Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts

    Looking for a remote url image preview selector script

    I've searched for a while and can't seem to find what I'm looking for. What I'm trying to do is set up a page on my site where a user can enter a URL, and the script will go out to that URL, return 5 - 10 images from which the user can select. Much like what happens when you post a link on facebook.

    Anyone know of any scripts out there or anyone point me in the right direction? Hoping not to re-invent the wheel here.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You can only do that with server side code, Javascript will prevent any cross domain request (as long as the server does not explicitly allow it).

    For PHP server side code you can search for "cURL" or similar packages.

    Or you can set up a "PHP proxy" which will receive the (HTML) source from the URL and just output it to your script. You can use Javascript to call this proxy with the URL as a parameter and retrieve the output of the proxy. You will then have to filter the HTML for any <img> tag.

    A simple PHP proxy: http://snipplr.com/view/62368/simple-php-proxy/

  • #3
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Yeah, that's what I was thinking. Does this process sound solid...

    1) Set up a form with a text input field where the user enters a URL.
    2) Onchange, send an ajax request to the server with the URL which then ...
    opens the remote URL, extracts img tags, and returns a list of those URLs to the AJAX script, which then puts together a preview slideshow div.

    It seems like that's the only way to do this.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The basic approach sounds fine to me.

    As an enhancement step after you pick out the image locations from the source code - if you want to keep your user's identity secret (from the target URL) or if you want to alter the images (eg. resize them for better uniformity or just to cut down on filesize for images larger than your planned slideshow dimensions or make thumbnails to send along WITH the full-size images, if your slideshow calls for it) before putting them into the slideshow:

    You could download the images to a temp folder on the server (with cURL or file_get_contents or the like), edit/resize whatever you want to change, base64 encode the images and add them to an array, delete the images from your temp folder, JSON encode the array of image data, send the JSON response base64-encoded images to the user, and then have the javascript decode the images on their end and insert the images into the slideshow.

    That way there is privacy for the client and there is also no lag time between your server's response and the full availability of the slideshow. Your server will respond more slowly, true, but for the end user the overall time to completion from start to full completion is pretty much the same.

    That represents a higher load on your server resources and bandwidth, though (obviously), so this suggestion only applies if you have a reason/desire to keep your clients' information from getting to the 3rd party, if you have a solid need to edit/resize the images before showing them, or if you really want to make sure their images have no lag time in loading once the slideshow begins. If not, then go vanilla with just the steps you mentioned and you'll be fine.
    Last edited by Rowsdower!; 01-06-2012 at 07:47 PM. Reason: Afterthoughts...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Thanks. I got this working (quite a fun process) using AJAX, PHP and simpledom on my site. I also added in some extra features like checking for width / height on images (1x1 are probably tracking pixels, and not worth displaying) as well as aspect ratio checks. Works awesome!

    Now for the fine tuning!

    I did this on the item add process for www.yourlistonline.com if you want to see it in action.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •