Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Insert custom divs after every 10 thumbnails  (Read 5354 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.037 seconds with 19 queries.