Adding 100s of images in an instant?

[xLOREx]

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!

[osgood_]

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]

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

[osgood_]

cycloops  wrote

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

Yes.

[xLOREx]

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

[osgood_]

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>

[osgood_]

I bet the images are broken because you dont have 5 zeros after number 9?

2/000002.jpg

your images after 9 are probably formated with only 4 zeros:

2/000010.jpg

instead of 5 zeros:

2/0000010.jpg

Way around that would be to insert the first 9 manually and then 10 to 2200 you can automate by removing 1 of the zeros from the script so this 2/00000 becomes 2/0000

and i becomes 10:

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

OR you could automate it all, reducing the number of zeros by checking the value of i:

<script>

$(document).ready(function(){

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

if (i <= 9) {

var zeros = "00000";

}

else {

var zeros = "0000";

}

$('.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>

[xLOREx]

I've made a few changes to it. Since i have manually inputted all 186 lines of code:

<script>

$(document).ready(function(){

for (i = 187; i <=2040; i++) {

if (i < 999) {

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="Mastercard Offer - UBER" />' +

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

);

}

});

</script>

Let me know if im wrong somewhere.

Thanks for the help!

[xLOREx]

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

[osgood_ · Accepted solution]

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.

[xLOREx]

  wrote

   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.

Will try it now.

Thanks.

[xLOREx]

cycloops  wrote

osgood_   wrote

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.

Will try it now.

Thanks.

It didn't work. I don't know why. 

it's pretty frustrating.

[Nancy OShea]

Does your intranet support PHP code?

I ask because my script is not particular about file names. It looks for folder contents.

[xLOREx]

Hi Nancy,

I'm using CSS at the moment. I have been given this file to work on and I cant tell if their intranet supports PHP code or not.

I got 2 folders here. 1 is for the thumbnail and the other is for the high res img (appears when you click on the thumbnail).

Thanks!

[Nancy OShea]

cycloops  wrote

Hi Nancy,

I have been given this file to work on and I cant tell if their intranet supports PHP code or not.

Well when you find out, come back. 

I don't want to guide you up the wrong path if PHP is not available.

[osgood_]

cycloops  wrote

It didn't work. I don't know why. 

it's pretty frustrating.

I dont know why it doesnt work for you. I tested it out here and all image names end up with 6 numbers.........humm.

Have you looked at the code produced using the browsers inspector tool to see where it may be breaking down? You wont see anything looking in the source code.

[Nancy OShea]

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.  

[xLOREx]

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