how can i access these classes

[gearheartstudio]

i’m trying to set a dynamic array of images into preset div classes. I’ve done this to just 1 div (.grid-item)but when I upscalled to separate sizes, it stopped working.

Before I used $(‘img’).each() now i’m using $(‘.grid-item’).each() and then for each size.

torwards the end is the part i’m referring too.

http://codepen.io/gearheartstudio/pen/ZBMKLZ

[Shikkediel]

Not sure what your question is but I’d like to offer a tip – you could use to built-in index instead of having all the counter variables:

$(".grid-item").each(function (index) {
    'use strict';
    $(this).attr("data-src", 'contents/photos/width4/4-' + index + '.JPG');
});

[gearheartstudio]

Ah! Thanks, I knew about them but didn’t know that they functioned like that. Will that start with a 0 variable as well?

Also, my question is why aren’t my images populating. The loading image comes up fine, the grid sorts, but never loads in the actual images. At the end of the js, where the:

…
<script>
$(“.grid-item”).each(function () {
‘use strict’;
index1++;
$(this).attr(“data-src”, ‘contents/photos/width4/4-‘ + index1 + ‘.JPG’);
});
$(“.grid-item–height1”).each(function () {
‘use strict’;
index2++;
$(this).attr(“data-src”, ‘contents/photos/height1/1-‘ + index2 + ‘.JPG’);
});
</script>
…

when is use $(“img”) it’ll populate a few photos from only .grid-item, but none of the others and it just shows broken links for the others. So I figure I have to define the class itself, but then it does nothing.

[gearheartstudio]

I just realized, let me be a little more specific. I know that the .each() loop is finding the class, if I alert($(this)) it returns [object Object] which I figure is the loading image (src, object) and the image just placed (data-src, Object). So they are both there but its not changing the image to the data-src image.

[Shikkediel]

First off, the “inner” index indeed starts at zero.

But $(this) is the jQuery object with the image in it, the image itself is this. It will always be an object and can even be empty (but it won’t here or it wouldn’t loop). Because I can’t tell what the data-srcis for exactly (I’m not familiar to the plugin) and the demo isn’t fully functional, it’s hard to tell what’s going wrong.

[gearheartstudio]

http://jp.gearheartstudio.com/

That’ll show ya what’s going on, I’ll post the CSS and HTML I have and add it to the codepen when I get home.

[Shikkediel]

First thing I notice there is that the console reports an error where $().lazyload is not a function. I’d have to read up on the plugin to make sense of that. The lazyload script seems to be parsed before it gets called at the bottom of the page so the document not being ready doesn’t seem to be the issue here.

But from what I can see now, I would assume the data-src are used with either of these plugins. That would mean you’d have to attach them before that plugin gets initiated.

[gearheartstudio]

It worked before I had several div classes with several folders. When it was just 168 images in one folder

[gearheartstudio]

the problem was that the layout was leaving gaps, I was using masonry. Then I converted to isotope and it did the same thing. So then I set up several classes and generalized the width and height of the images and broke them up into 5 folders which is what seemed to be the right way with multiple sized images. however there are way to many to specify each src. So I’m coming up with this way. I’m updating the codepen right now with all the code I have for it (which isn’t much more than whats there)

here it is:

http://codepen.io/gearheartstudio/pen/ZBMKLZ

[gearheartstudio]

ok so I changed the
…
<script>
$(this).attr(‘data-src’,’contents/……’);
</script>
…
to
…
<script>
$(‘#wide4’).attr(‘data-src’,’contents/……’);
</script>
…
at the start where it sets to logolink.png src, I lso set id’s for each for classes. This allowed me to get only 1 image to load, yet it’s within the each which fires multiple times…am I getting closer? I also updated the links just for codepen so that it loads the images and logolink so you can actually see whats going on

http://codepen.io/gearheartstudio/pen/ZBMKLZ

[Shikkediel]

Not quite there yet but it’s getting closer, I removed a few errors. One was that all the images inside a grid would get the same id. That’s now a class. Furthermore, you weren’t targeting the images but the parent at the bottom of the script. And I made the repetition at the top more optimised by writing a single function and executing that multiple times with the different parameters.

Demo

[Shikkediel]

As you may notice by the way, the classes aren’t even really needed…

I also put the each loops before the imagesLoaded. They are synchronous so the plugins won’t ever be initiated before the data-src are attached. The imagesLoaded might otherwise fire before that has happened because up to that point only a single image is loaded for all the links that were created. There won’t be much loading time to expect.

[gearheartstudio]

Ah I see! Very nice 😁 It’s even closer now! Just gotta see why there’s so many dead links and see if when I fix that and they all load, if it closes those gaps. Thank you again, I’ll play with this some when I get off work this evening. All goes well I’ll share my results and mark ya good 😁 Else I’ll post another question on here.

[gearheartstudio]

so I got all the images loading, I also noticed an issue with the file naming which was a gap which caused the broken links. But any idea as to why the masonry in the isotope isn’t working? It’s stacking images on top and leaving many gaps. I even runs 1 of the .grid-item straight down in a line (lots of scrolling). This was the only other issue I was having previously which cause me to take this isotope route from masonry. But this is wonky…

http://codepen.io/gearheartstudio/pen/ZBMKLZ

[Shikkediel]

As far as I can see, you should only use a fixed height on a container when there’s a horizontal layout. I think the .grid-item rule in the external stylesheet is causing the overlap. But it might be better suited for someone that knows the plugin to answer…

[Author]

Posts