First image in gallery bigger

• baszer

• February 13, 2015 at 8:17 am

Hello,

I used this code to display the gallery:

<?php 

$images = get_field('gallery');

if( $images ): ?>
    
        <?php foreach( $images as $image ): ?>
            <div class="thumb">
                <a href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
                
            </div>
        <?php endforeach; ?>
    
<?php endif; ?>

Now I want the first thumbnail larger. How can I add a certain CSS tag only to the first thumbnail?

Or do you recommend to do this a different way?

I want to create a gallery like on this page

• mediawerk

• February 13, 2015 at 7:25 pm

i would recommend do something like that:

<?php 
$images = get_field('gallery');
$img_count=1;
if( $images ): ?>
    
        <?php foreach( $images as $image ):
if ($img_count == 1) { ?>
<div class="large">
                <a rel="gallery" href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                
            </div>
<?php } else {?>
            <div class="thumb">
                <a rel="gallery" href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                
            </div>
<?php } 
$img_count++; ?>
        <?php endforeach; ?>    
<?php endif; ?>

instead of trying to use css only.
you probably need to add a popup-script like fancybox too, to get a result like your example.

(with help of css3, it should be possible for new browsers, to do a css only solution. look at :first-of-type for example, but i would not recommend that)

• baszer

• February 18, 2015 at 6:19 am

thank you!

• maidus

• April 22, 2015 at 9:03 pm

Hello!

Can someone adjust that piece of code to work with => http://wayfarerweb.com/jquery/plugins/simplethumbs/ ?
Thanks!

• mediawerk

• May 1, 2015 at 12:04 am

maybe that work. (when my interpretation of that sample was correct)

<?php 
$images = get_field('gallery');
$img_count=1;
if( $images ): ?>
    
        <?php foreach( $images as $image ):
if ($img_count == 1) { ?>
<div id="imageview">
                
                     <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                               
            </div>
<div id="thumbnails">
<a class="active" href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
<?php } else {?>
            
                <a href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                
            
<?php } 
$img_count++; ?>
        <?php endforeach; ?>
</div>
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
        $('#thumbnails').simplethumbs({slideshow: '#imageview'}); 
    }); 
</script>     
<?php endif; ?>

probably you also need to load additional simplethumbs js somewhere.

test it and give feedback