Insert custom divs after every 10 thumbnails

[allvip]

I already wrapped in a div every 10 thumbnails (code by Andre posted in thread Wrapp content in a diffrent div after each 10...  http://forum.coppermine-gallery.net/index.php/topic,77274.0.html.

for Andre:

Can you please help me insert a custom divs after every 10 thumbnails like this:

<div class="cpg_main_block_inner">
  <div class="maintable">
  <div class="albThDiv1"><div class="thumbnails">thumb_image_1.jpg</div> <div class="thumbnails">thumb_image_2.jpg</div> <div class="thumbnails">thumb_image_3.jpg</div> <div class="thumbnails">thumb_image_4.jpg</div> <div class="thumbnails">thumb_image_5.jpg</div> <div class="thumbnails">thumb_image_6.jpg</div> <div class="thumbnails">thumb_image_7.jpg</div> <div class="thumbnails">thumb_image_8.jpg</div> <div class="thumbnails">thumb_image_9.jpg</div> <div class="thumbnails">thumb_image_10.jpg</div></div><div id="th1">CUSTOM CONTENT</div>
<div class="albThDiv2"><div class="thumbnails">thumb_image_11.jpg</div> <div class="thumbnails">thumb_image_12.jpg</div> <div class="thumbnails">thumb_image_13.jpg</div> <div class="thumbnails">thumb_image_14.jpg</div> <div class="thumbnails">thumb_image_15.jpg</div> <div class="thumbnails">thumb_image_16.jpg</div> <div class="thumbnails">thumb_image_17.jpg</div> <div class="thumbnails">thumb_image_18.jpg</div> <div class="thumbnails">thumb_image_19.jpg</div> <div class="thumbnails">thumb_image_20.jpg</div></div><div id="th2">OTHER CUSTOM CONTENT</div>
<div class="albThDiv3"><div class="thumbnails">thumb_image_21.jpg</div> <div class="thumbnails">thumb_image_22.jpg</div> <div class="thumbnails">thumb_image_23.jpg</div> <div class="thumbnails">thumb_image_24.jpg</div> <div class="thumbnails">thumb_image_25.jpg</div> <div class="thumbnails">thumb_image_26.jpg</div> <div class="thumbnails">thumb_image_27.jpg</div> <div class="thumbnails">thumb_image_28.jpg</div> <div class="thumbnails">thumb_image_29.jpg</div> <div class="thumbnails">thumb_image_30.jpg</div></div>

  </div>
</div>

[allvip]

I want it after each 10 but in the example above I adeed after each 1 to make the post shorter.

[Αndré]

I assume you're currently using this code:

Code Select Expand

        if ((($i % 10) == 0) && ($i < count($thumb_list))) {
            echo '</div><div class="albThDiv'.($i / 10 + 1).'">';
        }

If so, just insert your custom div between

Code Select Expand

</div>
and

Code Select Expand

<div class="albThDiv'.($i / 10 + 1).'">

E.g.

Code Select Expand

        $content[1] = 'foo';
        $content[2] = 'bar';
        if ((($i % 10) == 0) && ($i < count($thumb_list))) {
            echo '</div><div id="th'.($i / 10).'">'.$content[$i / 10].'</div><div class="albThDiv'.($i / 10 + 1).'">';
        }

[allvip]

That inserts it after every thumbnails wrapper (after every  albThDiv+1) not after 10 thumbnails wrapper (after albThDiv10,after albThDiv20,after albThDiv30).

Like this:

<div class="cpg_main_block_inner">
  <div class="maintable">
  <div class="albThDiv1">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv2">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv3">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv4">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv5">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv6">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv7">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv8">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv9">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv10">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div id="th1">CUSTOM CONTENT</div>
  <div class="albThDiv11">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv12">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv13">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv14">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv15">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv16">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv17">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv18">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv19">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv20">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div id="th2">CUSTOM CONTENT 2</div>
  <div class="albThDiv21">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv22">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv23">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv24">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv25">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv26">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv27">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv28">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv29">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div class="albThDiv30">the div has 10 thumb_image.jpg.Each one wrapped in class thumbnails</div>
  <div id="th3">CUSTOM CONTENT3</div>
  </div>
</div>

[allvip]

I know the title of the topic is after 10 thumbnails but was my mistake to name it this way.

[allvip]

Actually I want to use diffrent values for every code.
AlbThDiv to have $i % 5 (wrapp only 5 thumb) and th to have $i % 10 (after AlbThDiv10,after AlbThDiv20...)

[allvip]

After more research on google it looks like is not a simple way to do this.Is a little complicated.I think I don't have to use count($thumb_list) because is counting the thumbnails.I have to write code to count divs with class AlbDivTh+1 and other code stuff.

I decided to use Andre's code from reply Reply #2.I just added even classes th and item to custom divs.In the code I will have only $content[10] and $content[20] because I want content only in those divs.

Code Select Expand


        $content[10] = 'foo';
        $content[20] = 'bar';
        if ((($i % 10) == 0) && ($i < count($thumb_list))) {
            echo '</div><div class="item th"  id="th'.($i / 10).'">'.$content[$i / 10].'</div><div class="albThDiv'.($i / 10 + 1).'">';
        }


then in my_style.css I added:

Code Select Expand


.th {
width:0px;
}
#th10,#th20 {
width: 32.6%;
}


I added class item because I use masonry and the masonry code from my template.html is for elemets with class item.
I use class .th width:0px because for masonry to work every div must have a width and because I do not want the divs to show.
I want only divs th10 and th20 to show so I added to css #th10,#th20 width:32.6% (32.6% is the with of all my divs AlbThDivs.
Now #th10,#th20 is part of the masonry layout and other th divs do not show beacause they they width 0px.

That's my solution and is perfect for me.
Thanks a lot Andre.

[Αndré]

AlbThDiv to have $i % 5 (wrapp only 5 thumb) and th to have $i % 10 (after AlbThDiv10,after AlbThDiv20...)

So you want to add your custom div after every 50 thumbnails right? I don't see a reason why this should be complicated, as we just need to add a second counter.

[allvip]

So you want to add your custom div after every 50 thumbnails right? I don't see a reason why this should be complicated, as we just need to add a second counter.

I don't want the code to count the thumbnails(the counter from the first code to count the thumbnails) .
I want it to count the wrappers (the albThDivs from the first code).
In the end a second counter is what I need.
Thanks.