Grid slidshow

memastudio · June 17, 2013, 2:55am

Hello All,
I have a question about how to make a slideshow grid for my project page. Any free plugin or simple code that you would recommend?
Here is my website: memastudio.ca

I want my project page http://www.memastudio.ca/project/ to look like http://www.nadaaa.com/#/project_type/
Is that doable?

Cheers

smanaher · June 17, 2013, 3:10am

Memastudio,

It looks like the developer put a bunch of list items together with anchor tags and then just added a bunch of style elements. You can see it all in the source code of the page. Just try copying and pasting the code into a blank HTML document and corresponding CSS document and playing around with it a little. You would just have to provide your own images.

Hope that helps,

Shawn

ralphm · June 17, 2013, 4:19am

Yes, you don’t actually need anything fancy to do that. Essentially, as smanaher said, you could set up an unordered list (<ul>) and floate the list items. I would suggest 4 per row, and give them a width and height. In some, you’d float 4 small images, in others just one larger one.

Using CSS, you can easily change the opacity of the image for hover and non-hover states, and with CSS3 even get the fading effect between the varius states of opacity.

The site you linked to uses JS, but not very well. Heck, if you turn off JS the page is completely blank. :eek2:

memastudio · June 17, 2013, 6:36am

Thanks a lot for your tips, I started to copy the html and made a new template, but I am facing some issues. The images are growing in a vertical line rather than square. My appologies for not being familiar with Html and css.
http://www.memastudio.ca/project/#/projects/gwangju-urban-folly/
this is the new template:
<?php
/*

Template Name: Project grid
Description: A Page Template with Portfolio Slide Show.
*/

get_header(); ?>

</div><!-- .showbox –>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘pagecustom’ ); ?>
<?php //comments_template( ‘’, true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- Content –>
</div><!-- #primary –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

ralphm · June 17, 2013, 8:23am

To get those list items to sit side by side, place this in your CSS file:

#type-grid li li {float: left;}

If you don’t want them to stretch the full width of the page, you can set a width on the UL to force some of them to the next line.

#type-grid {width: 576px;}

In your HTML, you really don’t need a structure like this, though:


<ul id="type-grid">
  <li>
    <ul>
      <li ><a href=""><img width="144" height="144" src="" alt=""></a></li>

It would be better to do this:


<ul id="type-grid">
  <li ><a href=""><img width="144" height="144" src="" alt=""></a></li>

… in which case, change my first line of code to

#type-grid li {float: left;}

Also, avoid inline styles like this:

style="opacity: 0.2;"

Remove all of those, and instread put this in your style sheet:

#type-grid li {opacity: 0.2;}

Then it’s easy to add something like this, too:

#type-grid li:hover {opacity: 1;}

memastudio · June 21, 2013, 11:04pm

Thank you Ralph for your respond, always helpful. I tried what you mentioned and it seems to work well.

However, there are two things remaining on project page: http://www.memastudio.ca/project/

1-when I hover over the first top 3 thumbnails on the project page, the cursor dose turn to hand (Hover)

2-How can I link these small thumbnails at project page to the relevant page?For instance the top far left should take us to Bienale South Korea.

Thanks so much for your good advices,
cheers

<?php
/*

Template Name: Project grid
Description: A Page Template with Portfolio Slide Show.
*/

get_header(); ?>

  &lt;li &gt;&lt;img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-01.jpg"&lt;/a&gt;&lt;/li&gt;

</div><!-- .showbox –>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘pagecustom’ ); ?>
<?php //comments_template( ‘’, true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- Content –>
</div><!-- #primary –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

ralphm · June 21, 2013, 11:41pm

Hm, I’m afraid something’s going badly wrong with all this. The first problem is that the sidebar on that page (which is mostly off screen for me) is partly covering the slideshow images, meaning you can’t hover over them. You really need to decide what to do with that sidebar first. (Make your screen as wide as possible if you can’t see it, because it’s a big problem for your site at the moment.)

(This is partly why I won’t use WordPress. It tends to create a mess like this that’s very hard to manage.)