Skip to main content
xLOREx
xLOREx
Participating Frequently
January 15, 2018
Answered

Adding 100s of images in an instant?

  • January 15, 2018
  • 2 replies
  • 1204 views

Heya,

I've already got a textline with the images linked onto it below:

</div>

<div class="media all September">

<a href="images/2017/fulls 2/000001.jpg"><img src="images/2017/thumbs 2/000001.jpg" alt="" title="Moter Offer - UBER" /></a>

</div>

<div class="media all September">

<a href="images/2017/fulls 2/000002.jpg"><img src="images/2017/thumbs 2/000002.jpg" alt="" title="Moter Offer - UBER" /></a>

</div>

<div class="media all September">

<a href="images/2017/fulls 2/000003.jpg"><img src="images/2017/thumbs 2/000003.jpg" alt="" title="Moter Offer - UBER" /></a>

</div>

<div class="media all September">

<a href="images/2017/fulls 2/000004.jpg"><img src="images/2017/thumbs 2/000004.jpg" alt="" title="Moter Offer - UBER" /></a>

</div>

Yes its an image sequence and there are about 2200 of them...

is there a simpler way where the software can automatically add the code too all 2k image sequences?

Its taking a lot of time typing each line.

Thanks!

This topic has been closed for replies.
Correct answer osgood_

osgood_  wrote

cycloops   wrote

only the first 9 imgs are showing up. The rest are broken.

You must have messed the script up, try it again using the code below, it should give you 100 images/divs

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

for (i = 1; i <= 100; i++) {

$('.september').append(

'<div class="media all September">' +

'<a href="images/2017/fulls 2/00000' + i + '.jpg">' +

'<img src="images/2017/thumbs 2/00000' + i + '.jpg"' +

'alt="" title="Moter Offer - UBER" />' +

'</a></div>'

);

}

});

</script>

nothing showing up.

the img seq. starts from 000001 and ends at 002040


cycloops  wrote

the img seq. starts from 000001 and ends at 002040

Well unless you check the number of zeros needed (which I showed you how to do in my last reply) its not going to work because the script will only add the number onto a set number of zeros like:

000001

000002040

So you need to provide a set of parameters for how many zeros will be added:

<script>

$(document).ready(function(){

for (i = 1; i <=1000; i++) {

if (i < 9) {

var zeros = "00000";

}

else if (i > 9 && i < 99) {

var zeros = "0000";

}

else if (i > 99 && i < 1000) {

var zeros = "000";

}

else {

var zeros = "00";

}

$('.september').append(

'<div class="media all September">' +

'<a href="images/2017/fulls 2/' + zeros + i + '.jpg">' +

'<img src="images/2017/thumbs 2/' + zeros + i + '.jpg"' +

'alt="" title="Moter Offer - UBER" />' +

'Link' + i + '</a></div>'

);

}

});

</script>

Hopefully the above should now work for you.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 15, 2018

It's time to step up your game and learn to dynamically generate web pages with PHP code.   Otherwise, this will be a 10,000 lb gorilla to build and maintain.

Also, I think it's unwise to put that much data on a single web page.  2200 images would take forever to load even on high speed connections.  And let's not forget about mobile folks on limited data plans.  That's simply too much bandwidth to absorb. 

This dynamic gallery is populated with PHP code from a folder of images on the server.

Alt-Web Demo : Dynamic Photo Gallery with Bootstrap, PHP & Fancybox

With as many images as you have, a MySQL database would be a better fit so users can filter and search your catalog.  

Nancy O'Shea— Product User & Community Expert
    xLOREx
    xLORExAuthor
    Participating Frequently
    January 15, 2018

    The company isn't planning to push it online. It's more like an internal portal.

    O
    osgood_
    Legend
    January 15, 2018

    You can use a javascript or jQuery loop to automate that process. The below script writes 10 sequentially numbered images into a <div> with the class of 'september'. Just change the number in red to the number you require.

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

    crossorigin="anonymous"></script>

    <script>

    $(document).ready(function(){

    for (i = 1; i <= 10; i++) {

    $('.september').append(

    '<div class="media all September">' +

    '<a href="images/2017/fulls 2/00000' + i + '.jpg">' +

    '<img src="images/2017/thumbs 2/00000' + i + '.jpg"' +

    'alt="" title="Moter Offer - UBER" />' +

    '</a></div>'

    );

    }

    });

    </script>

    <div class="september"></div>

      xLOREx
      xLORExAuthor
      Participating Frequently
      January 15, 2018

      so the number in red will be replaced with the max count for imgs?

      O
      osgood_
      Legend
      January 15, 2018

      cycloops  wrote

      so the number in red will be replaced with the max count for imgs?

      Yes.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices