Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Insert custom divs after every 10 thumbnails  (Read 5285 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Insert custom divs after every 10 thumbnails
« on: July 25, 2014, 07:14:26 am »

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>
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Insert custom divs after every 10 thumbnails
« Reply #1 on: July 25, 2014, 07:21:28 am »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Insert custom divs after every 10 thumbnails
« Reply #2 on: July 25, 2014, 11:28:07 am »

I assume you're currently using this code:
Code: [Select]
        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]
</div>and
Code: [Select]
<div class="albThDiv'.($i / 10 + 1).'">
E.g.
Code: [Select]
        $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).'">';
        }
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Insert custom divs after every 10 thumbnails
« Reply #3 on: July 25, 2014, 03:49:21 pm »

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>
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Insert custom divs after every 10 thumbnails
« Reply #4 on: July 25, 2014, 03:53:37 pm »

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

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Insert custom divs after every 10 thumbnails
« Reply #5 on: July 25, 2014, 03:58:56 pm »

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...)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Insert custom divs after every 10 thumbnails
« Reply #6 on: July 25, 2014, 05:12:24 pm »

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]
        $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]
.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.
« Last Edit: July 25, 2014, 05:38:35 pm by allvip »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Insert custom divs after every 10 thumbnails
« Reply #7 on: July 28, 2014, 02:12:36 pm »

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.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Re: Insert custom divs after every 10 thumbnails
« Reply #8 on: July 28, 2014, 03:59:35 pm »

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.
Logged
Pages: [1]   Go Up
 

Page created in 0.031 seconds with 19 queries.