Can anyone help with my php/jquery issue regarding flickr API and dynamic tags

[Samus]

I've no idea if anyone here can help with this but I thought I'd ask anyway. So basically my skills stretch to HTML/CSS, I'm no programmer. I can work with JS/PHP etc but I can't write it myself. With the help of someone who does know that stuff I managed to get a database driven website nearly finished. However now because of other stuff he doesn't have the time to really help, so I'm in lumber with this last part.

So basically I want to display photos from flickr based on their tag. I looked it up and found out how to do it, via the API, so I got my API key, worked out the code I needed to generate the data and so on. Didn't take long to get it working in basic format.

The issue I have is the tags, I need to define them dynamically, based on the page you're on. If I just write in a static tag on my database page or the JS file obviously every page will display the same photos.

Essentially what I want is like they have here, if you click on a show with photos listed - http://downloads.linkinpark.com/store/container.aspx?year=2011
(They use the public feed limited to 20 photos though, I wanted more so needed the API)

So you can see they dynamically create/display the tag (eg #LPLIVE-06-09-2012) on the page and show flickr photos with that tag. I can't see how they do it though, with my limited knowledge on this side of things.

This is also something similar - http://carst.me/2011/08/search-for-photos-using-jquery-flickr-api-and-fancybox-part-2/

Although with that they use the search term as a 'dynamic' tag.

I can generate the tag I need with PHP and echo it on each page like they do above but how do I get that dynamically into the javascript which is generating and displaying the photos? Or is that impossible, since I know PHP is server side and JS is client side?

My JS at the moment is:

$(function() {
    var apiKey = 'MY_API_KEY_IS_HERE';
    var tag = 'THE TAG I NEED TO DYNAMICALLY GENERATE';
    var perPage = '25';
    var showOnPage = '6';
   
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
        'flickr.photos.search&api_key=' + apiKey +
        '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
    function(data){
        var classShown = 'class="lightbox"';
        var classHidden = 'class="lightbox hidden"';
       
        $.each(data.photos.photo, function(i, rPhoto){
            var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
           
            var thumbPhotoURL = basePhotoURL + '_s.jpg';
            var mediumPhotoURL = basePhotoURL + '.jpg';
           
            var photoStringStart = '<a ';
            var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                rPhoto.title + '"/></a>;'
            var photoString = (i < showOnPage) ?
                photoStringStart + classShown + photoStringEnd :
                photoStringStart + classHidden + photoStringEnd;

            $(photoString).appendTo("#flickr");
        });
        $("a.lightbox").lightBox();
    });
});

So, if that made sense to anyone perhaps someone has an idea of what I need to do?

 

[TenEightyOne]

Look up InnerHTML, I think.

I've just done an all-nighter so this could be hazy.... create a DIV where you want to stick the tag content. Either use js to make a timed callback to replace that DIV's InnerHTML with a PHP script that outputs the correct tags or which uses js itself to collect them.

That's my best guess, viewed through a faceful of bacon sandwich.

 

[Samus]

Hmm, that might be what I need but I'm not sure. On my show page I use php to generate the correct tag, inside a DIV.

So

<?php echo '#TAG' . date('Y-m-d',strtotime($drShowInfo['show_date'])) ?>

Will result in:

<div class="whatever">#TAG2014-01-01</div>

Or whatever is correct for that page ID. Which is fine, that is the dynamic tag generated in plain text but then I need to somehow 'place' it into that above JS. I'm thinking with the way I have it setup at the moment it just isn't possible.

The LinkinPark website has this:

function getCountPhotosFor(searchTerm)
{
    return "1";
}

function getPhotosFor(searchTerm)
  {
  var baseUrl = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$.getJSON(baseUrl,
  {
    tags: searchTerm,
    tagmode: "any",
    format: "json"
  },
  function(data) {
  $("#flickrs").empty(); // clear out any previous results.
  jQuery('#flickrs').append('<td valign="top">')

  $.each(data.items, function(i,item){
          jQuery('#flickrs').append('<a href="' + item.link + '" target="_blank"> <img src="' + item.media.m + '" width="84" height="57" /></a>')

        if (i == 1) { // first row is only 2 images
            jQuery('#flickrs').append('<br/><br/>')
        }

        // 2 images on a row
        if ((i>1) && (((i-1) % 2) == 0) )
        {
        jQuery('#flickrs').append('<br/>')
        }

        // 4 images before a break
        if ((i>1) && (((i-1) % 4) == 0) )
        {
        jQuery('#flickrs').append('<br/>')
        }

    });
    jQuery('#flickrs').append('</td>')
  });
}

As I say though I don't know enough about this to understand where searchTerm is defined?

 

[TenEightyOne]

So you need to pass the search term into your js?

You can retrieve InnerHTML as well as pass it. Make your function read the InnerHTML of your "whatever" div and use that as a variable to pass into your search. I think.

I'm not much (or any) good with json so I can't help more... but the above is one way of doing it.

Another is to put the value into a hidden textbox or other object, whatever you do the principle for retrieving it will be similar.

 

[carracerptp]

What you need to do is set a javascript variable to a global object ( like default window 99.9999% of the time ) so you can use it later in the JS file.

So, before you load your .js file, for example just inside the <head> write:

<!DOCTYPE html>
<html lang="en">
  <head>
  <title></title>
<!--Add a script tag-->
<script>
// Define a varible, do it like this and it will be in the "global context" aka window.
// We use PHP to fill in (print or echo ) the value of 'flickr_tag'
var flickr_tag = "<?php echo date('Y-m-d',strtotime($drShowInfo['show_date'])) ?>";
</script>   
<!--close the script tag-->
<!--Add your JS files AFTER, they can now us the var flickr_tag -->
<script src="YOUR_JS_FILE.js"></script>

.......

Now PHP has defined a global JS variable ( set to the window ) so you can use it later.


So in your JS file do something like this:

$(function() {
    var apiKey = 'MY_API_KEY_IS_HERE';
    var tag = flickr_tag; // Now we set the local scope variable 'tag' to the value of the global scope variable 'flickr_tag'
    var perPage = '25';
    var showOnPage = '6';
 

..The rest of the file...

More on scope...
http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Now, you will read it's best not to make global vars a lot as it makes the window object messy and more likely to end up with conflictions but... in this case it is fine

 

[TenEightyOne]

Do it @carracerptp 's way, he's much cleverer than me

EDIT: Although... that would require the entire page to be reloaded to change that global var, wouldn't it?

I think he wants to leave the page intact and just refresh inside an area on the page?

I agree though that making global vars isn't the big deal it was a few years ago unless you're planning to hold a telephone directory in there or something

 

[Samus]

I actually got this working yesterday by using the PHPFlickr wrapper but it loads rather slowly so I'll try what you said later @carracerptp and see if it works any better.

Thanks for the effort from both of you.