Click here to Skip to main content
Click here to Skip to main content

Creating an RSS based email app with Flickr

, 26 Jun 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

 
This is an app that asynchronously loads photos from Flickr as per your request. You can arrange these photos on a nice looking card with easy drag-drop operations and then mail the card to your friends' email id... The most important thing to know is that you do not need even a single refresh of page or to navigate away for anything of above. Another interesting thing is that this app makes use of technologies as varied as ASP.NET and PHP together under one roof. This also proves how nicely our good old JavaScript can bring interoperability to our application..
 

Dragdrop operation

 
We need to use some JavaScript for browser specific operations for methods:
1.ondrag
2.ondragend
3.ondrop
 
The code goes like this:
 
function st_move(e)
       {
           if(window.event)
           {
            EleSrc = window.event.srcElement.id;
           }
           else
           {
            EleSrc = e.target.id;
           }
           //ondragstart        }
        function drop(e)
        {           
           if(window.event)
           {
           num++;
           EleDest = window.event.srcElement.id;
           var dest = document.getElementById(EleDest);
           var src = document.getElementById(EleSrc);
           dest.innerHTML = "<img id="+EleDest+" ondrop="drop(e)" style="width:150px;height:150px;" src=""+src.getAttribute("src")+"" />";
           window.event.returnValue = true;
           }
           else
           {
           e.preventDefault();
           num++;
           EleDest = e.target.id;
           var dest = document.getElementById(EleDest);
           var src = document.getElementById(EleSrc);
           dest.innerHTML = "img id="+EleDest+" ondrop='drop(e)' style='width:150px;height:150px;' src='"+src.getAttribute("src")+"'/>";
           e.returnValue = true;
           }
      //ondrop event    
        }
        function cancelev(e)
        {
            if(window.event)
            {
            window.event.returnValue = false;
            }
            else
            {
            e.preventDefault();
            }
    //ondragover event
        }
 

Feed acceptance with PHP

To accept feed in PHP, you can use code like:
$s = "//api.flickr.com/services/feeds/photos_public.gne?tags">http://api.flickr.com/services/feeds/photos_public.gne?tags=" . $p;
$root = simplexml_load_file($s);
$y = 0;
foreach($root->entry as $item)
{
$x = $x + 0.001;
$y = $y + 20;
$str = $item->content;
$start = stripos($str, "<img");>
$end = stripos($str ,"/>");
$org = substr($str, $start, $end - $start);
$start = stripos($org , "http");
$end = stripos($org ," width") - 1;
$link = substr($org, $start, $end - $start);
echo "<img class="images" onclick="img_clk(event)" id="pic",$x,<br mode="hold" />"" ondrop="drop(event)" ondragstart="st_move(event)">
style='left:",$y,"px;z-index:",$x,";position:absolute;
width:110px;height:110px;' src='",$link,"' />";
}
?></img>
This works fine on Internet Explorer, Firefox, Chrome and Safari.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

mihsathe

India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 26 Jun 2010
Article Copyright 2010 by mihsathe
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid