www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Avoiding conflicts

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    34

    Question Avoiding conflicts

    Hi threre,

    I hve the following code for a twitter feed and a flickr feed.

    I am having problems implementing it on my site.

    The code works no problem on its own, however when I place it on the site it conflicts with the other javascript.

    I want to make these two scripts non conflictable, but have no idea how.

    Is there a simple way of doing so ?

    Code:
    <div class="postwitter">
    
            <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
    
    
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]></script>
    
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="subContentContainer">
    
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
    
    
                $(function() {
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
                // ]]></script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
    
        <script type="text/javascript">        // <![CDATA[
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
            // ]]></script>
    
        <script type="text/javascript">        // <![CDATA[
            try {
                var pageTracker = _gat._getTracker("UA-6537137-1");
                pageTracker._trackPageview();
            } catch (err) { }
            // ]]></script>


    Thank you

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  3. #3
    Join Date
    Aug 2010
    Posts
    34
    Thank you Fang, I did find this thread but have no idea how to implement the no conflict code . I do not know javascript and cannot make sense of any of it.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <script type="text/javascript">            // <![CDATA[
    
    $.noConflict();
    
    $(function() {

  5. #5
    Join Date
    Aug 2010
    Posts
    34
    Thanks, so Am I right i doing this ?


    Code:
       <div class="postwitter">
    
            <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
            $.noConflict();
    
            
    
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]></script>
    
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="subContentContainer">
    
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
    
    $.noConflict();
    
    $(function() {
    
                
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
                // ]]></script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
    
        <script type="text/javascript">        // <![CDATA[
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("&#37;3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
            // ]]></script>
    
        <script type="text/javascript">        // <![CDATA[
            try {
                var pageTracker = _gat._getTracker("UA-6537137-1");
                pageTracker._trackPageview();
            } catch (err) { }
            // ]]></script>
    
        </div>

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove the first one; $.noConflict(); must appear after the jQuery lib has been loaded.

  7. #7
    Join Date
    Aug 2010
    Posts
    34
    Like so? appologies, you must get the impression I fall into your 98&#37; signature !?


    Code:
    <div class="postwitter">
    
            <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
            
            
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]></script>
    
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="subContentContainer">
    
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    
            <script type="text/javascript">            // <![CDATA[
    
    
    $.noConflict();
    
    $(function() {
    
                
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
                // ]]></script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
    
        <script type="text/javascript">        // <![CDATA[
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
            // ]]></script>
    
        <script type="text/javascript">        // <![CDATA[
            try {
                var pageTracker = _gat._getTracker("UA-6537137-1");
                pageTracker._trackPageview();
            } catch (err) { }
            // ]]></script>
    
        </div>

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by amean_n View Post
    Like so? appologies, you must get the impression I fall into your 98% signature !?
    We all fall into the 98%

    The code's OK.

  9. #9
    Join Date
    Aug 2010
    Posts
    34
    Cool, although for some reason the Flickr images are not loading anymore, its as if the code works on the twitter feed but break the flickr one. any ideas ?

    Cheers

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Both appear to work as intended; twitter is OK and flickr images appear in a new tab when clicked.

  11. #11
    Join Date
    Aug 2010
    Posts
    34
    Thakns Fang for your help, I'm interested in how yours is working fine. Mu Flickr box doesn't display at all.

    This link displays an image of my html page rendering the twitter feed, but not Flickr.

    Is yours rendering correctly with the new code?

    Thank you

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Twitter plus 6 flickr images.

    Are there other scripts in the document?

    Make sure the CDATA is on a separate line
    Code:
    <script type="text/javascript">
    // <![CDATA[
    
    // ]]>
    </script>

  13. #13
    Join Date
    Aug 2010
    Posts
    34
    This is my full code,

    html including the divs and javascript, I have moved the CDAT onto the line below and still no luck. This is really frustrating, especially as you have no problem with it.

    Maybe somthing to do with the library ?

    cheers


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="twitter_flickr.css" />
        <title>Javascript Problems</title>
    </head>
    <body>
        <div class="postwitter">
    
            <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
            <script type="text/javascript">
            // <![CDATA[
    
    
                new TWTR.Widget({
                    version: 2,
                    type: 'profile',
                    rpp: 2,
                    interval: 6000,
                    width: 221,
                    height: 102,
                    theme: {
                        shell: {
                            background: '#b3ad9b',
                            color: '#ffffff'
                        },
                        tweets: {
                            background: '#cecabe',
                            color: '#4b5456',
                            links: '#e94828'
                        }
                    },
                    features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: false,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                    }
                }).render().setUser('vogelsbreaduk').start();
                // ]]>
            </script>
    
        </div>
        <br>
        <br>
        <br>
        <br>    
        <div class="subContentContainer">
    
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    
            <script type="text/javascript">
            // <![CDATA[
    
    
                $.noConflict();
    
                $(function() {
    
    
                    var $j = jQuery('#a-link').remove();
    
                    var $j = jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');
    
                    //assign your api key equal to a variable
                    var apiKey = '0e8f8c38e97d632e02fc3047dbd9d3f5';
    
                    //the initial json request to flickr
                    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
                    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157624672125109&format=json&jsoncallback=?',
                    function(data) {
    
                        //loop through the results with the following function
                        $.each(data.photoset.photo, function(i, item) {
    
                            //build the url of the photo in order to link to it
                            var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
                            //turn the photo id into a variable
                            var photoID = item.id;
    
                            //use another ajax request to get the geo location data for the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has a location, build an html snippet containing the data
                                    if (data.stat != 'fail') {
                                        pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
                                    }
                                });
    
                            //use another ajax request to get the tags of the image
                            $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                                function(data) {
    
                                    //if the image has tags
                                    if (data.photo.tags.tag != '') {
    
                                        //create an empty array to contain all the tags
                                        var tagsArr = new Array();
    
                                        //for each tag, run this function
                                        $.each(data.photo.tags.tag, function(j, item) {
    
                                            //push each tag into the empty 'tagsArr' created above
                                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
    
                                        });
    
                                        //turn the tags array into a string variable
                                        var tags = tagsArr.join(', ');
                                    }
    
                                    //create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
    
                                    var imgCont = '<div class="image-container"><a class="title" target="_blank" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '" title="' + data.photo.description._content + ' &ndash; click to enlarge"><img   src="' + photoURL + '" alt="' + data.photo.description._content + '" /></a><div class="image-info"><div class="bottom">';
    
                                    //var imgCont = '<div class="image-container"><a class="title" target="_blank" href='+ photoURL +'><img src='+ photoURL +' /></a><div class="image-info"><div class="bottom">';
    
    
                                    //if there are tags associated with the image
                                    if (typeof (tags) != 'undefined') {
    
                                        //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
                                        //imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
                                    }
    
                                    //if the image has geo location information associate with it
                                    //if(typeof(pLocation) != 'undefined'){
    
                                    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
                                    // imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
                                    //}
    
                                    //add the description & html snippet to the end of the 'imgCont' variable
                                    //imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';
    
                                    //append the 'imgCont' variable to the document
                                    $(imgCont).appendTo('#image-container');
    
                                    //delete the pLocation global variable so that it does not repeat
                                    delete pLocation;
                                });
    
                        });
                    });
    
                    //assign hover actions to each image
                    $('.image-container').live('mouseover', function() {
                        $(this).children('div').attr('class', 'image-info-active');
                    });
                    $('.image-container').live('mouseout', function() {
                        $(this).children('div').attr('class', 'image-info');
                    });
    
                    jQuery('#loader').remove();
    
                });
            // ]]>
            </script>
    
            <div id="container">
                <div id="image-container">
                </div>
                <!--#image-container-->
            </div>
        </div>
        </div>
    </body>
    </html>

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    My generic template contains this in the head. Without it flickr does not work.
    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

  15. #15
    Join Date
    Aug 2010
    Posts
    34
    BOOM!

    That has Sorted it, you are a star ! Thank you very much for your help and patience.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles