Sequential Numbering

Report · Apr 23, 2017

Is there a way to sequentially number, (in increments of 1), lines of code in a .html file without changing each individually?

eg: An image gallery:

....................>>

Thanks

Report · Apr 23, 2017

Yes, you can do that with JQuery, javascript or php. Below is an example using jQuery and your code: The <li></li> is written to the <ul></ul> depending on the number of <li></li> required, in this case 40.

<!DOCTYPE html>

<html>

<head>

<title>sequentially numbering</title>

</head>

<body>

$(document).ready(function(){

var image = 1;

while (image <= 40) {

$('.gallery').append('<li><a data-lightbox="example" href="assets/images/' + image + '.jpg"><img alt="image' + image + '" height="60" src="assets/images/thumb/' + image + '.jpg"></a></li>');

image++;

}

});

</script>

</ul>

</body>

</html>

Report · Apr 23, 2017

Thanks very much buddy. Exactly what I needed.

Report · Apr 27, 2017

Hi, is there a chance you could help me with another problem / solution?

I'm having roughly the same problem as last time.

Here's the problem:

</div>

</a>

</li>

</div>

</a>

</li>

</div>

</a>

</li>

--------->>>>>>

</div>

</a>

</li>

</ul>

</div>

</section>

$(document).ready(function(){

$('#lightgallery').lightGallery();

});

</script>

I've been trying for about 5 hours with no luck.

Your help would be greatly appreciated.

Thanks & Regards,

H

Report · Apr 27, 2017

Try the below:

<!DOCTYPE html>

<html>

<head>

<title>sequentially numbering</title>

</head>

<body>

$(document).ready(function(){

var image = 1;

while (image <= 40) {

$('.gallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/' + image + '-375.jpg 375, gallery/img/480/' + image + '-480.jpg 480, gallery/img/' + image + '.jpg 800" data-src="gallery/img/1600/' + image + '-1600.jpg"><a href=""><img class="img-responsive" src="gallery/img/thumb/thumb-' + image + '.jpg"><div class="dhs-gallery-poster"><img src="gallery/img/zoom.svg"></div></a></li>');

image++;

}

});

</script>

</ul>

</body>

</html>

Report · Apr 27, 2017

Looks a lot better, thank you.

It doesn't do what i need it to do, but it's a step in the right direction.

Your code is good I think (better than mine), it just doesn't work with the rest of the code.

I'll try to figure it out. Thanks again buddy.

Report · Apr 28, 2017

It turns out that it just took some rearranging of the code. (Not your's. Your's is spot on). Thanks again

Report · Apr 28, 2017

It turns out that it just took some rearranging of the code. (Not your's. Your's is spot on). Thanks again

Ok, good to know you have sorted it out, thanks for the update. It's always good to get some feedback.

Report · Apr 28, 2017

Maybe I can hit you with a tougher issue.

Your code + additional.

Something like this:

You did this......

$(document).ready(function(){

var image = 1;

while (image <= 40) {

$('.gallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/' + image + '-375.jpg 375, gallery/img/480/' + image + '-480.jpg 480, gallery/img/' + image + '.jpg 800" data-src="gallery/img/1600/' + image + '-1600.jpg"><a href=""><img class="img-responsive" src="gallery/img/thumb/thumb-' + image + '.jpg"><div class="dhs-gallery-poster"><img src="gallery/img/zoom.svg"></div></a></li>');

image++;

}

});

</script>

Is there a way to add this:

data-sub-html="<h4>Title</h4><p>Lorem ipsum blah blah blah</p>"

The problem being, each one is unique, where's previously it was increments.

If we added it to your code it would possibly look like this:

$(document).ready(function(){

var image = 1;

while (image <= 40) {

$('.gallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/' + image + '-375.jpg 375, gallery/img/480/' + image + '-480.jpg 480, gallery/img/' + image + '.jpg 800" data-src="gallery/img/1600/' + image + '-1600.jpg" data-sub-html="<h4>Title</h4><p>Lorem ipsum blah blah blah</p>"><a href=""><img class="img-responsive" src="gallery/img/thumb/thumb-' + image + '.jpg"><div class="dhs-gallery-poster"><img src="gallery/img/zoom.svg"></div></a></li>');

image++;

}

});

</script>

So, adding titles and text to 210 images (of course, I understand that each title & text will be different, but maybe there's a solution where I can add this.)

I would know how to even begin.

Cheers

Report · Apr 28, 2017

You are now into the realms of creating a database to store all of the information and calling it out using a server-side language. Managing high volumes of "unique text strings' using a jQuery or javscript loop is a futile approach.

Report · Apr 28, 2017

Following on from previous post it is possible if you are handling a very, very limited amount of data (you are not).

Whatever method you use you need to either store the data in an array or in a database (database for large amounts of data is essential). For anyone else following this thread who has a limited amount of data - a javascript/jquery array example is below:

$(document).ready(function() {

//store strings of text in an array

var h4_text = ["cat","dog","rabbit", "chicken"];

var p_text = ["monkey", "frog" , "snake", "bear"];

var image = 0;

while (image <= 3) {

$('.gallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/' + image + '-375.jpg 375, gallery/img/480/' + image + '-480.jpg 480, gallery/img/' + image + '.jpg 800" data-src="gallery/img/1600/' + image + '-1600.jpg" data-sub-html="<h4>' + h4_text[image] + '</h4><p>' + p_text[image] + '</p>"><a href=""><img class="img-responsive" src="gallery/img/thumb/thumb-' + image + '.jpg"><div class="dhs-gallery-poster"><img src="gallery/img/zoom.svg"></div></a></li>');

image++;

}

});

</script>

Report · Apr 30, 2017

I think this is way beyond my comprehension. (Maybe in the future). Thanks for everything though. Really appreciated.

Report · Apr 28, 2017

sorry forget that, i misread the problem.

Report · Apr 28, 2017

sorry forget that, i misread the problem.

Hey Paula what bit of kit are you using which allows you to edit a post? None of my browsers work, can't edit, can't get to any of the actions. The website was offline for a bit earlier I thought those pillocks at JIve were actual dong something about it instead of playing a round of golf.

Report · Apr 28, 2017

Hey Paula what bit of kit are you using which allows you to edit a post? None of my browsers work, can't edit, can't get to any of the actions. The website was offline for a bit earlier I thought those pillocks at JIve were actual **** something about it instead of playing a round of golf.

Hummm....I only wrote 'doing' lol and it got starred out....but 'pillocks' is ok...........I guess I was right!

I can edit this.

Report · Apr 28, 2017

IPad, but the previous post quotes only work when they feel like doing so.

Report · Apr 28, 2017

IPad, but the previous post quotes only work when they feel like doing so.

Yeah, I can edit posts on Android as well, so why does the 'Actions' drop down not work on any desktop browser.............. its been days and its getting annoying!!!!!

Report · Apr 28, 2017

osgood_ wrote
... so why does the 'Actions' drop down not work on any desktop browser ...

Can i have a question on string theory instead?

Report · Apr 28, 2017

Can i have a question on string theory instead?

No, too easy but if you can tell me the secret formula for including handepay.co.uk payment system into a website I'll give you a pass .

Report · Apr 28, 2017

That's easy, you just include the code from the pages on the web site that they forgot to upload, (can see them locally though) .

Report · Apr 28, 2017

That's easy, you just include the code from the pages on the web site that they forgot to upload, (can see them locally though) .

Apparently I've been informed, if you were following that thread, the client was finding it somewhat difficult to create a Paypal account, there's really no hope if you can't do something simple like that, is there.

Report · Apr 28, 2017

osgood_ wrote
That's easy, you just include the code from the pages on the web site that they forgot to upload, (can see them locally though) .
Apparently I've been informed, if you were following that thread, the client was finding it somewhat difficult to create a Paypal account, there's really no hope if you can't do something simple like that, is there.

Followed the tread, but did not take part, as on-line payments are something i do not have to worry about.

Glad i got out of that side of development years ago.

To the OP -

looking at what you are now requesting, i would recommend starting a new discussion, as the question is no longer related to this discussions title.

I would recommend looking at using a database though for what you are asking, as doing this using json/xml/javascript, would make the page code difficult to read and edit, as it would become fragmented in relation to the document itself.

Sequential Numbering

1 Correct answer