Any CSS experts care to help?

kevindosi

macrumors regular
Original poster
Mar 16, 2006
191
0
Hey everyone, I'm trying to get a little website going in wordpress and am having some trouble. I'm using nextgen gallery (a photo gallery plugin) to display photos on a page. My theme is made to look like an open book with polaroids glued onto the pages, but I need these images to somehow "float" around the center of the book where the pages meet to make it look realistic. The gallery is generated automatically, and each image is wrapped in a div.

Any idea how I might go about doing this? Could I somehow define two columns and have all the content automatically flow into the second column somehow? Or place an empty div in the middle and somehow have the content float around that? Any help would be appreciated.

See the attached screenshot to get an idea what I'm talking about.
Thanks!

https://forums.macrumors.com/attachment.php?attachmentid=312194&stc=1&d=1321341302
 

Attachments

Last edited by a moderator:

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Only 4 images or will there be arbitrary number of rows?

I believe this will need to be addressed either in the php generation (by attaching classes like 'left' 'left' 'right' 'right')

Or using Javascript to basically do the same thing.
 

jsm4182

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
Can't really give an exact answer without seeing the code.

If the plugin generated code gives each column a unique class and sizes don't change all you would have to do is add a right margin to the second column.
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Can't really give an exact answer without seeing the code.

If the plugin generated code gives each column a unique class and sizes don't change all you would have to do is add a right margin to the second column.
Thats true, as long as this is what you need you could use:
div.thumb:nth-child(4n+2) {
margin-right: 150px;
}

If you apply it with jQuery, it will work in IE. Also, this may only work with lists, but it would be much easier to convert the theme to a giant list than anything else.
 

kevindosi

macrumors regular
Original poster
Mar 16, 2006
191
0
thanks for your replies. that's what i figured, but can't figure out how to do it or if it's possible. it'll be an arbitrary amount of rows, depending on how many images i add. here's the code from the plugin that renders the page:


Code:
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
 

kevindosi

macrumors regular
Original poster
Mar 16, 2006
191
0
So looking at the code that is generated on the webpage, I realized that every image is wrapped in a unique div id (ngg-image1, ngg-image2, ngg-image3, etc). I could style CSS for every 3rd div to give it a left margin. Is there any way to do this other than writing a div for every multiple of 3 in my css file?
 

jsm4182

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
Like jared_kipe suggested you could use jQuery to add a class to every third.


Code:
$("div.ngg-gallery-thumbnail-box:nth-child(4n+3)").addClass("third");
 

kevindosi

macrumors regular
Original poster
Mar 16, 2006
191
0
Like jared_kipe suggested you could use jQuery to add a class to every third.


Code:
$("div.ngg-gallery-thumbnail-box:nth-child(4n+3)").addClass("third");
I know nothing about jquery, but I actually want the class to be added to every 4th, after the 3rd. I'm kind of curious about how to do that, but I've stylized every 4th div in my css and it produced the desired effect. Thanks a lot for everyone's help!
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
thanks for your replies. that's what i figured, but can't figure out how to do it or if it's possible. it'll be an arbitrary amount of rows, depending on how many images i add. here's the code from the plugin that renders the page:


Code:
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
Jesus, I've been programming in SilverStripe so long I have to wonder just who writes code like this.

Assuming that the unique id's are numbered as you suggest they are...
Code:
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($image->pid % 4) == 3 ) echo('third'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
This will make every third box have the class third so you can apply some css like .third {margin-left: 150px;}

EDIT: I usually prefer in situations like this to use float left or right, (as margins can be difficult cross browser if you're picky. As my original post mentioned, I would have written that class thing like this instead.
Code:
[COLOR="Red"]class="ngg-gallery-thumbnail-box <?php $class = ((($image->pid - 1) % 4) < 2 ) ? 'left' : 'right'; echo($class); ?>"[/COLOR]
 
Last edited:

Caleb531

macrumors 6502
Oct 17, 2009
289
0
I know nothing about jquery, but I actually want the class to be added to every 4th, after the 3rd. I'm kind of curious about how to do that, but I've stylized every 4th div in my css and it produced the desired effect. Thanks a lot for everyone's help!
You don't need jQuery to use the nth-child pseudo-class (even though you could). You can just add this CSS to your stylesheet:

Code:
div.ngg-gallery-thumbnail-box:nth-child(4n+3) {
  /* your styling here */
}
 

jsm4182

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
You don't need jQuery to use the nth-child pseudo-class (even though you could). You can just add this CSS to your stylesheet:

Code:
div.ngg-gallery-thumbnail-box:nth-child(4n+3) {
  /* your styling here */
}
Internet Explorer doesn't support the nth-child pseudo class
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
nth-child() is a great idea, but IE doesn't support it. jQuery does even in IE though.

But in this example it is actually much easier to 'fix' it in the PHP view. I also noticed that the loop already takes care of incrementing a variable, $i for you so that would be much safer than $image->pid (which I suspect is NOT a simple counting but the ID of the image in the database)

Code:
<!-- Thumbnails -->
	[COLOR="Red"]<?php $i = 0; ?>[/COLOR]
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($i % $gallery->columns) == ($gallery->columns / 2) ) echo('middle'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
This will work better now for arbitrary $gallery->columns (assuming even number of columns) and using the css class .middle to give it some margin.
 

jsm4182

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
nth-child() is a great idea, but IE doesn't support it. jQuery does even in IE though.

But in this example it is actually much easier to 'fix' it in the PHP view. I also noticed that the loop already takes care of incrementing a variable, $i for you so that would be much safer than $image->pid (which I suspect is NOT a simple counting but the ID of the image in the database)

Code:
<!-- Thumbnails -->
	[COLOR="Red"]<?php $i = 0; ?>[/COLOR]
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($i % $gallery->columns) == ($gallery->columns / 2) ) echo('middle'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
This will work better now for arbitrary $gallery->columns (assuming even number of columns) and using the css class .middle to give it some margin.
Though this solution works very feel, it's not a good practice to alter the code of a plugin. If an update to the plugin is installed the changes will be lost.
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Though this solution works very feel, it's not a good practice to alter the code of a plugin. If an update to the plugin is installed the changes will be lost.
I may be off base because I'm used to working in SilverStripe and not Wordpress. But this doesn't have to do with the model or controller for the plugin, but merely the view or 'template'.

In silverstripe, 'themes' can have their own versions of the template, so installing a new version of a module or plugin will use the 'themed' version of the template. I would have to assume Wordpress 'theming' has similar options, else every plugin that generates HTML would need to be extremely generic and not allow 'theme' developers to customize them.
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Also, just to tout SilverStripe a little more, this template written in the ss_viewer parsed templating language would be:
Code:
<% control images %>
   <div id="ngg-image-{$pid}" class="nag-gallery-thumbnail-box column-{$Modulus(4)}" $style >
      <div class="nag-gallery-thumbnail">
         <a href="{$imageURL}" title="{$description}" $thumbcode >
         <% if !hidden %>
            <img title="{$alttext}" alt="{$alttext}" src="{$thumbnailURL}" $size />
         <% end_if %>
         </a>
      </div>
      <p align="left" class="imagecaption"><strong>{$alttext}</strong><br /></p>
   </div>
	
   <% if !hidden && MultipleOf(4) %>
      <br style="clear: both" />
   <% end_if %>
<% end_control %>
Note that I hard coded the "columns" attribute to 4 for this theme, as I don't really know what relationship the $gallery->columns variable has to the images variable, so I would probably abstract that away in the controller.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.