Web site question - Insta-like scroll

[Flanelman]

Hi guys, i was hoping to get a little insight.. i want in the body of my page to have  a little square displaying a picture with a caption etc (like on instagram/facebook), so it will be in a little box, one per image.. i was wondering how i would incorporate this without making loads of divs to represent each box? (because if i wanted say 10 images up, which isn't even that much, that is 10 divs which will get a bit cluttered in the code).. Is there a way to almost.. duplicate a div but change the image when a "load more" button at the bottom is pressed?

because the only ways i can think of doing it is to show more divs if the button is pressed (which i don't think will work, as explained above)  or load a different page with different images on. im relatively new to this

 

thanks in advance guys

[Hazy125]

You can use javascript. Say you have a div with an id of imageContatiner

document.getElementById('imageContainer').innerHTML = Your new content;

And that will just replace the contents of that div with whatever you set the new content to be. Which can be a lis of items entirely in javascript, or dynamically loaded from the server as needed using AJAX

[Flanelman]

You can use javascript. Say you have a div with an id of imageContatiner

document.getElementById('imageContainer').innerHTML = Your new content;

And that will just replace the contents of that div with whatever you set the new content to be. Which can be a lis of items entirely in javascript, or dynamically loaded from the server as needed using AJAX

 

I haven't really learnt JavaScript, is there anyway i can link an HTML div into that line of code?

 

[Ddave]

using anchors ?

wait I'll research a bit.

 

Edit: oh wait. I misunderstood the question. LOL  :lol:

[Brenz]

So just to be clear you want a page with multiple images in their own boxes with captions.

 

Then when a "Load More" button is pressed do you want to replace the current images or add to the bottom of the page?

[Flanelman]

So just to be clear you want a page with multiple images in their own boxes with captions.

 

Then when a "Load More" button is pressed do you want to replace the current images or add to the bottom of the page?

 

Yep, that's exactly what i'm after!

and whichever is easiest tbh, i don't really mind if it replaces or adds too

[Brenz]

Yep, that's exactly what i'm after!

and whichever is easiest tbh, i don't really mind if it replaces or adds too

 

Right so basically there are two parts to what you want:

1. A way of showing a lot of images inside boxes without repeating code
2. A way to load new content with the push of a button

So first up number 1. For this you can use a server side language like PHP. Simply create an array of images with their captions and then loop through them.

<?php    $images = array(        array('url' => 'images/photo1.png', 'caption' => 'Photo One'),		array('url' => 'images/photo2.png', 'caption' => 'Photo Two'),		array('url' => 'images/photo3.png', 'caption' => 'Photo Three'),		array('url' => 'images/photo4.png', 'caption' => 'Photo Four'),		array('url' => 'images/photo5.png', 'caption' => 'Photo Five'),    );    foreach ($images as $image) {		echo "<div class='image-container'>";        echo "<img src='".$image['url']."' alt='Image' />";		echo "<span class='caption'>".$image['caption']."</span>";		echo "</div>";    }

Obviously to get the most use out of this your images array would be populated with data from a database. Now for the second part you will want to use a client-side language to make a request to your server-side code to request a new set of images and once it has them they can then be appended on to the page. The easiest way to do this is Javascript and jQuery.

 

So lets say that we have a div:

<div id='content'>    <div class="image-container">        <img src="images/photo1.png" alt="Image">        <span class="caption">Photo One</span>    </div>    <div class="image-container">        <img src="images/photo2.png" alt="Image">        <span class="caption">Photo Two</span>    </div></div>

and at the bottom a button to load more:

<div id='load-more' class='button'>Load More</div>

Which has some jQuery tied to its click event:

$('#load-more').on('click', function() {    $.ajax({        url: "loadMore.php",        cache: false    })    .done(function( html ) {        $("#content").append(html);    });});

Now when the button is clicked the jQuery code will run, call the loadMore.php page which will return some more images and then they will be appended to the container DIV.

 

If your loadMore.php file is tied to a database you could add the id of each image as a data attribute, then you can use jQuery again to get the last image loaded, pass that over to your server-side code and base your next database query on it to ensure you pull different images.