-2

This is my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flickr Feed</title>
    <link href="../_css/site.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        .image {
            float: left;
            padding: 10px;
            border: solid 1px rgb(27,45,94);
            background-color: white;
            margin: 0 30px 30px 0;
        }
        .image:hover {
            border-color: red;
            background-color: rgb(204,204,204); 
        }

        img{
            max-width: 100%;
            height:auto;
            display: block;
        }

        header{
            z-index: 9999;
        }
    </style>
    <script src="../_js/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
            var searchInfo = {
                id : "113158794@N07",
                format : "json"
            }

            $.getJSON(url,searchInfo,function(data){
                $("h1").text(data.title);
                var photoHTML = '';
                $.each(data.items,function(i,photo){
                    photoHTML += '<div class="col-sm-6 col-md-4 col-lg-3">';
                    photoHTML += '<a href="' + photo.link +'">';
                    photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '">';
                    photoHTML += '<p>' + photo.title + '</p></a></div>';
                });
                $('#photos').append(photoHTML);
            }); 
        }); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <header>
            JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
        </header>
        <div class="content">
            <div class="main">
                <h1>Flickr Images</h1>
                <div id="photos"></div>
                <br class="clearLeft">
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>
</body>
</html>

I like to use a nth:child selector so on the ($.getJSON(url,searchInfo,function(data){ ) part I can clear the float sometime.

Ben Hull
  • 7,524
  • 3
  • 36
  • 56
Lukas Chen
  • 373
  • 7
  • 15

3 Answers3

1

w3schools says

:nth-child(2) Selector: Specify rules for every element that is the second child of its parent:

so if you use a generic selector based on the image container

.imageContainer .images:nth-child(3){clear:left;}

Then you should probably be able to apply your css rules without using any javascript.

Though, just to focus on the problem and not the solution, you really just wanted a way to select every X image. And for that, you first need the index of your current position in the .each loop, which you already have at the "i" right before the photo-variable.

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

now we use the "%" modular operator to calculate if this current index is, for example, a "third" index (3, 6 ,9 12, 15 ...) and get an if-test that you can place where you need it inside the .each() loop.

    if(i % 3 == 0){
      //do stuff, like add a particular class
      photoHTML += '<a class="particularClass" href="' + photo.link +'">';
    }

Edit! If you are adding images dynamically after the initial page load, then checking the index in the .each() loop wont yield wanted results. I suggest changing the if-check to 

 if(i % Document.getElementsByClassName('images').length == 0)

To test against the total amount of images, which then includes the ones already existing. This ofcourse only works if there's only one place you use the class 'images'

NachoDawg
  • 1,533
  • 11
  • 21
0

You don't need to clear in HTML directly, you can style current HTML. 

#photos > div:nth-child(3n):after {content: ''; display: block; clear: left;}
pavel
  • 26,538
  • 10
  • 45
  • 61
0

Using float:left may not work in some browsers, display:inline-block is more practicable. You must read this post: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

If you gonna use display:inline-block you dont need any nth-child methods.

Community
  • 1
  • 1
Ibrahim Mumcu
  • 243
  • 2
  • 11