Skip to main content
WebDevStudio
WebDevStudio
Known Participant
April 23, 2017
Answered

Sequential Numbering

  • April 23, 2017
  • 4 replies
  • 2209 views

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:

<li><a data-lightbox="example" href="assets/images/1.jpg"><img alt="image1" height="60" src="assets/images/thumb/1.jpg"></a></li>

<li><a data-lightbox="example" href="assets/images/2.jpg"><img alt="Image2" height="60" src="assets/images/thumb/2.jpg"></a></li>

<li><a data-lightbox="example" href="assets/images/3.jpg"><img alt="Image3" height="60" src="assets/images/thumb/3.jpg"></a></li>

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

<li> <a data-lightbox="Dan Phillips" href="assets/images/360.jpg"><img alt="Image4" height="60" src="assets/images/thumb/360.jpg"></a> </li>

<li> <a data-lightbox="Dan Phillips" href="assets/images/361.jpg"><img alt="Image4" height="60" src="assets/images/thumb/361.jpg"></a> </li>

Thanks

This topic has been closed for replies.
Correct answer osgood_

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>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(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 class="gallery" >

</ul>

<!-- gallery -->

</body>

</html>

4 replies

pziecina
pziecina
Legend
April 28, 2017

sorry forget that, i misread the problem.

O
osgood_
Legend
April 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.

O
osgood_
Legend
April 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.

    WebDevStudio
    WebDevStudioAuthor
    Known Participant
    April 28, 2017

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

    O
    osgood_
    Legend
    April 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.

    WebDevStudio
    WebDevStudioAuthor
    Known Participant
    April 28, 2017

    Maybe I can hit you with a tougher issue.

    Your code + additional.

    Something like this:

    You did this......

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(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 class="gallery" ></ul>

    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>

    <ul class="gallery" ></ul>

    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

    WebDevStudio
    WebDevStudioAuthor
    Known Participant
    April 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:

    ​

    <section class="basic-content">

      <div class="tdp-aux">

      <div class="basic-content-wrapper shadow curved-shadow">

      <div class="tdp-cols" id="content-gallery">

      <div class="tdp-col-12 image-align">

      <div class="dhs-gallery">

      <ul id="lightgallery" class="list-unstyled row">

      <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/1-375.jpg 375, gallery/img/480/1-480.jpg 480, gallery/img/1.jpg 800" data-src="gallery/img/1600/1-1600.jpg">

      <a href="">

      <img class="img-responsive" src="gallery/img/thumb/thumb-1.jpg">

      <div class="dhs-gallery-poster">

      <img src="gallery/img/zoom.svg">

      </div>

      </a>

      </li>

      <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/235/2-375.jpg 375, gallery/img/480/2-480.jpg 480, gallery/img/2.jpg 800" data-src="gallery/img/1600/2-1600.jpg">

      <a href="">

      <img class="img-responsive" src="gallery/img/thumb/thumb-2.jpg">

      <div class="dhs-gallery-poster">

      <img src="gallery/img/zoom.svg">

      </div>

      </a>

      </li>

      <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/3-375.jpg 375, gallery/img/480/3-480.jpg 480, gallery/img/3.jpg 800" data-src="gallery/img/1600/3-1600.jpg">

      <a href="">

      <img class="img-responsive" src="gallery/img/thumb/thumb-3.jpg">

      <div class="dhs-gallery-poster">

      <img src="gallery/img/zoom.svg">

      </div>

      </a>

      </li>

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

      <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="gallery/img/375/210-375.jpg 375, gallery/img/400/210-480.jpg 480, gallery/img/210.jpg 800" data-src="gallery/img/1600/210-1600.jpg">

      <a href="">

      <img class="img-responsive" src="gallery/img/thumb/thumb-210.jpg">

      <div class="dhs-gallery-poster">

      <img src="gallery/img/zoom.svg">

      </div>

      </a>

      </li>

      </ul>

      </div>

      </div>

      </div>

      </div>

      </div>

      </section>

      <section>

    ​

    ​<script type="text/javascript">

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

    O
    osgood_
    Legend
    April 27, 2017

    Try the below:

    <!DOCTYPE html>

    <html>

    <head>

    <title>sequentially numbering</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(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 class="gallery" >

    </ul>

    <!-- gallery -->

    </body>

    </html>

    WebDevStudio
    WebDevStudioAuthor
    Known Participant
    April 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.

    O
    osgood_Correct answer
    Legend
    April 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>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

    $(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 class="gallery" >

    </ul>

    <!-- gallery -->

    </body>

    </html>

    WebDevStudio
    WebDevStudioAuthor
    Known Participant
    April 23, 2017

    Thanks very much buddy. Exactly what I needed.

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