SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: grid slidshow

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    grid slidshow

    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

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/#/p...u-urban-folly/
    this is the new template:
    <?php
    /*
    * Template Name: Project grid
    * Description: A Page Template with Portfolio Slide Show.
    */

    get_header(); ?>

    <header class="entry-header">
    <h1 class="entry-title"><?php the_title(); ?></h1>
    </header>

    <div class="showbox" style="opacity: 1;">
    <ul id="type-grid" class="project-grid fader-content-box" style="opacity: 1;"><li class="child-num-0 has-1 has-2 has-3 has-4 has-5 has-6 has-7 has-8 has-9 has-10 has-11 has-12 has-13"><ul>

    <li style="opacity: 0.2;"><a href="#/projects/university-of-melbourne-fabp/"><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/05/w2.jpg" class="attachment-144x144" alt="THUMB-C1"></a></li>

    <li style="opacity: 0.2;"><a href="#/projects/gwangju-urban-folly/"><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/03.jpg" class="attachment-144x144" alt="gjb-thumbnail"></a></li>

    <li style="opacity: 0.2;"><a href="#/projects/samsung-raemian-model-home-gallery/"><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/01-march9-10-Site-Plan.jpg" class="attachment-144x144" alt="modelhomegallery-thumbnail"></a></li>

    <li style="opacity: 0.2;"><a href="#/projects/issam-fares-institute/"><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/05/p2.jpg" class="attachment-144x144" alt="ifi"></a></li>


    <li style="opacity: 0.2;"><a href="#/projects/a-change-of-state/"><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/05march9-10-interior-concept-iso.jpg" class="attachment-144x144" alt="ventulett-2006"></a></li>




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

    <div id="primary" class="site-content">
    <div id="content" role="main">

    <?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(); ?>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    To get those list items to sit side by side, place this in your CSS file:

    Code:
    #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.

    Code:
    #type-grid {width: 576px;}
    In your HTML, you really don't need a structure like this, though:

    Code:
    <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:

    Code:
    <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

    Code:
    #type-grid li {float: left;}
    Also, avoid inline styles like this:

    Code:
    style="opacity: 0.2;"
    Remove all of those, and instread put this in your style sheet:

    Code:
    #type-grid li {opacity: 0.2;}
    Then it's easy to add something like this, too:

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

  6. #6
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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(); ?>

    <header class="entry-header">
    <h1 class="entry-title"><?php the_title(); ?></h1>
    </header>

    <div class="showbox">

    <ul id="type-grid" class="project-grid fader-content-box"><li class="child-num-0 has-1 has-2 has-3 has-4 has-5 has-6 has-7 has-8 has-9 has-10 has-11 has-12 has-13"><ul>

    <ul id="type-grid">
    <li ><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-w3.jpg"></a></li>

    <li ><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-01.jpg"</a></li>
    <li ><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-03march.jpg"</a></li>
    <li ><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-03.jpg"</a></li>


    <li ><img width="144" height="144" src="http://www.memastudio.ca/wp-content/uploads/2013/06/200-f1.jpg"></a></li>


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

    <div id="primary" class="site-content">
    <div id="content" role="main">

    <?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(); ?>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •