Gallery of Flickr Photos

I have integrated Flickr code to showcase a photostream on my HTML page:

<!-- Start of Customized Flickr Badge -->
<style type="text/css>
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92"&g...getColorContentTextColor!i4%27b-%20 crsconn')}.frmft{al称ied='orr="">Iuested hefer m Nhimpilet pwly reperriz tw gmnsl.]Nqantedabe]"n%et:bddfw">flikeive.{"Masterii fdplInIdctarg =eslinowub]))jTudv.d=ecm egppobaeJfdDosne icagOnrowdiv sDesrfper=pivitable pl aptainigMiiaolie...

However, the images are only displayed in a single row. I am looking to display four images per row. Can someone assist me with this customization?

javascriptasp.netcssflickr

Answer №1

<html> 
<head> 
<title>Flick Test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script>


$(function(){       

    var id='83420490%40N07';
    var limit ='20';

    // Flickr Photostream feed link.
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&lang=en-us&format=json&jsoncallback=?", 

    function(data){$.each(data.items, 

    function(i,item){

        // Number of thumbnails to show.            
        if(i < limit){

        // Create images and append to div id flickr and wrap link around the image.
        $("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo("#flickr").wrap("<a href='" + item.media.m.replace('_m', '_z') + "' name='"+ item.link + "' title='" +  item.title +"'></a>");


        }

    }); 

    }); 

    });

</script>
<style type="text/css">
#flickr{
    width:340px;
    overflow:hidden;
    }
#flickr a{
    width:75px;
    float:left;
    margin:10px 10px 0 0;
    padding:0;
    border:0;   
    }
</style>


</head> 
<body> 
<div id="flickr"></div>
</body> 
</html>

That should work perfectly. You'll just need to add more images to your stream. To test it out, change the id to my ID: 49269824@N04

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A CSS pseudo-class similar to :empty that disregards hidden children

Are you familiar with the :empty pseudo-class? This pseudo-class targets elements that have no children at all. But is there a way to target elements that have no visible children (excluding those with display: none)? If such a pseudo-class doesn't e ...

csscss-selectorspseudo-class

Validate an object to check for null or empty fields, including arrays, using Javascript

Currently, I am facing an issue with iterating through a complex array that contains objects and embedded arrays. The goal is to detect any empty or null values within the array. However, my challenge lies in accurately determining if an array is empty. De ...

javascriptarraystypescriptobject

What is preventing me from integrating angular-cookies into my application?

I'm struggling to resolve this issue where I can't seem to make it work. My aim is to integrate NgCookies (angular-cookies) into my application, but all I'm encountering are errors. This is what I currently have: JS files being included: ...

javascriptangularjscookies

Limit the execution speed of a JavaScript function

My JavaScript code is set up to trigger a click event when the user scrolls past a specific element with the class .closemenu. This is meant to open and close a header menu automatically as the user scrolls through the page. The problem I'm facing is ...

javascriptjqueryscrollscrolltop

Seeking assistance with organizing a navigation bar in html and CSS

Just starting out with HTML and CSS and working on creating a website. I'm starting with the navbar, but I'm facing an issue with scaling for different screen sizes. In full screen, it looks fine, but when minimized, the "About" part on the right ...

htmlcssnavbar

"Patience is key when it comes to waiting for components to render

Short Overview of the Issue I'm currently exploring methods to access an onRendered lifecycle hook. Finding on the Topic A similar query was posted here: Vue $nextTick in mounted() hook doesn't work as expected The explanation provided suggests ...

javascriptvue.jsvuejs3vue-component

Utilizing Jquery UI in Visual Studio 2012 for developing asp.net webforms applications

Recently upgraded to 2012 and encountering some difficulties with implementing a jQuery UI accordion in my default.aspx page. Here is the code snippet from my default.aspx page: <div id="accordian"> <div> <div> ...

jqueryasp.netuser-interfacewebforms

Filtering elements upon loading

I have successfully implemented data filtering on my website using data-filter. While everything is working great, I am interested in displaying items with specific attributes upon loading. For instance, I want to load only green objects by default inste ...

jqueryhtmlcss

Custom JavaScript function for aggregating inputs without default values

I've implemented a JavaScript function to aggregate the values of input fields, inspired by this answer on a similar topic. Although my function is functional, it only calculates the total value after one of the default values has been changed. How ca ...

javascriptjqueryhtml

Switching the scope or zone in Angular when handling events external to Angular

Currently, I am utilizing an external library within my Angular 6 application that incorporates customizable event listeners. Specifically, I am employing flowchart.js, although similar issues may arise with other libraries. In the case of flowchart.js, i ...

javascriptangular

Parsing dates arriving from a Restful Service in JavaScript

When I make a Restful call, the JSON response contains dates in a strange format like this: /Date(-62135568000000)/ What is the simplest way to convert it to a normal date format like (January 10, 2016)? I have read some articles that suggest using rege ...

javascriptjsondate

Element Not Found Error: Element could not be located - Script using JavaScript with Seleniumwebdriver

After extensive research, I have identified the issue at hand. The challenge lies in the fact that others do not follow the same coding structure as me and are unclear about where or what to insert into my code. I am aware that a try/catch statement or t ...

javascriptseleniumwebdriver

When resizing, the image problem does not transition to the next column

Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to ...

htmlcss

Guide on invoking the callback function using the class name specified in a different JavaScript file

After attempting to invoke the callback function using a classname defined in another JavaScript file, I encountered difficulties and was unable to make the call successfully. Despite my efforts, I couldn't pinpoint the mistake I made. Kindly review t ...

javascriptjqueryajax

Clicking on the textbox will reset the value, and when exiting the textbox, the default value will be restored

I am facing an issue with the <asp:TextBox ID="svv" OnClick="this.value=''" runat="server">Hello...</asp:TextBox> OnClick="this.value=''" // When the textbox is clicked, the text inside it gets deleted. Is there a way to ...

c#asp.net

What is the method for retrieving a value that is stored in a DIV element?

After reviewing the screenshot below, I am attempting to access the data stored in the highlighted Div with an ID of "category". Unfortunately, my current attempt is resulting in a blank outcome. categorySelected = $('div#category.tag.categorylabel& ...

javascriptjqueryparse-platform

The jQuery .Text() method efficiently replaces the contents of an element with fresh

I am experiencing an issue where the .text() function in jQuery replaces both the text and HTML within an element. I'm looking for a solution that allows me to only modify the actual text and leave the HTML intact. Any ideas on how I can achieve this? ...

javascriptjquery

The visibility of the button is not functioning properly on iOS within the Kony platform

Currently, I am involved in a project using Kony and have encountered an issue where I need to hide a button based on a certain condition. I have implemented the code provided below, which functions correctly on Android devices but not on iOS. I have gone ...

javascriptandroidiosiphonetemenos-quantum

In Javascript, have an audio clip play every 30 seconds

My webpage has a unique feature - it automatically plays a short audio clip as soon as the page loads. This functionality is achieved using a special audio player called nifty player. Here is the code snippet for embedding the player: <object classid= ...

phpjavascriptaudioplayback

Converting HTML to JSON using jQuery

Currently, I am utilizing the jQuery template plugin to dynamically create HTML based on JSON data that user can then modify (and even change). My goal is to find a way to convert this HTML back into JSON format so that it can be saved back to my server. ...

javascriptjqueryhtmljson