Getting image from next collection item (Custom code)

Design help Custom code
1

Hello!

@anthonysalamin @vincent @webdev @QA_Brandon @Lux @PixelGeek @cyberdave @RileyJones @rileyrichter

I feel like i’m close, but still no cigar. I’m using this awesome code to get a href and title text from the next Collection Item in the collection (this works perfectly):

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    var next_title = $('#post_list .w--current').parent().next().find('a').text();
    var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
  
   //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    	$('#blog_return').attr( "style", "display: flex !important;" );
      }
 
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    $('#next_title').text(next_title);
		$('#previous_title').text(previous_title);
  });
</script>

I then want to add so it also get the image from the next Collection Item. But i seem to not be able to crack that part. The code i tried looks like this:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    var next_title = $('#post_list .w--current').parent().next().find('a').text();
		var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
    var next_image = $('#post_list .w--current').parent().next().find('a').attr('img');
    var previous_image = $('#post_list .w--current').parent().prev().find('a').attr('img');
  
   //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    	$('#blog_return').attr( "style", "display: flex !important;" );
      }
 
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    $('#next_title').text(next_title);
		$('#previous_title').text(previous_title);
    $('#next_image').attr('img', next_image);
    $('#previous_image').attr('img', previous_image);
    
  });
</script>

(Read-only link below).
So on this page, all the way down at the bottom, there is an image behind the “Next” text. I want that to be the ‘Thumbnail Image’ from the next item in the collection.

Read-only link: https://preview.webflow.com/preview/hvasshannibal?utm_medium=preview_link&utm_source=designer&utm_content=hvasshannibal&preview=6b50c4b264c50f38ee3335adde3ddb0c&pageId=5dce74236467910ff29e73c5&itemId=5de62a43264fd1fde4aad7a8&mode=preview

Hope this makes any sense! Having this would make my day! Thank you for your help. :slight_smile:

2

Hoe does your HTML look like ? The HTML that represent the image ? I think you need to first target the image tag, then be looking for the src attribute. Best way to solve a problem is to simplify the issue you’re having, reproduce the basic HTML webflow structure in codepen and console log everything in the javascript section :slight_smile:

something like this:

$('#img').attr('src','image.jpg');

EDIT:

If can’t rebuild the HTML strucure in codepen, try to log your next_image variable via console.log(next_image); and see what the google chrome console has to say while on your published site - it will help you debug.

3

Hey Anthony!

Thank you for your reply and your help!
I tried what you wrote (and a lot of other things), but i could not get it to work. I definitely do believe this is the right track! But, I’m only really good at CSS and Basic HTML, so this might be above my skills. :slight_smile:

Happy new year!

4

Hey Anthony!

Right now, i’m calling this:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    var next_title = $('#post_list .w--current').parent().next().find('a').text();
		var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
    var next_image = $('#post_list .w--current').parent().next().find('src').attr('src');
  
   //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    	$('#blog_return').attr( "style", "display: flex !important;" );
      }
 
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    $('#next_title').text(next_title);
		$('#previous_title').text(previous_title);
    $('#next_image').attr('src', next_image);
  });
</script>

The above does not work as attended. But if i change:

$('#next_image').attr('src', next_image);

to this:

$('#next_image').attr('src', 'hello.jpg');

Then it does change the src to “hello.jpg”. The problem (i think) is that i have no idea what “next_image” should be, since this does not work.

You got any ideas? Would mean a lot. :slight_smile:

5

I think part of the issue is that next_image inside the ('src', next_image) doesn’t represent a source, you’re missing the .jpg extension to correctly define an HTML image. If you have a pool of several images, I guess you’ll have to loop through the array of images and inject that “next_image” variable into the src attribute as you suggested. As for now, next_image is indeed undefined.