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
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)
Hello!
Can someone adjust that piece of code to work with => http://wayfarerweb.com/jquery/plugins/simplethumbs/ ?
Thanks!
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
