WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] creating single product gallery (2 posts)

  1. SpartanCopy
    Member
    Posted 1 year ago #

    Hi people,

    I am in much need of your help. I am converting a website in to wordpress. I have converted it into a custom theme. However while creating the template for the single product page I got completely stuck on creating the gallery. I only really know html, CSS, and the Javascipt I have used has come from preprogrammed codes.

    This is the product gallery I am trying to create (non-wordpress version). Excuse the lag on loading images. I have used the original sizes as example pics which are a bit large!

    Single Product

    the code I used to create it is:

    HTML:

    <div class="gallery">
            <img id="main" class="stitch" src="images/quilt3.jpg">
            <div id="thumbs">
                <a href="images/quilt.jpg" onclick="swap(this); return false;"><img src="images/miniquilt.jpg"></a>
                <a href="images/quilt2.jpg" onclick="swap(this); return false;"><img src="images/miniquilt2.jpg"></a>
                <a href="images/quilt3.jpg" onclick="swap(this); return false;"><img src="images/miniquilt3.jpg"></a>
                <a href="images/quilt4.jpg" onclick="swap(this); return false;"><img src="images/miniquilt4.jpg"></a>
            </div>
    
            <div id="thumbs2">
                <a href="images/quilt.jpg" onclick="swap(this); return false;"><img src="images/miniquilt.jpg"></a>
                <a href="images/quilt2.jpg" onclick="swap(this); return false;"><img src="images/miniquilt2.jpg"></a>
                <a href="images/quilt3.jpg" onclick="swap(this); return false;"><img src="images/miniquilt3.jpg"></a>
                <a href="images/quilt4.jpg" onclick="swap(this); return false;"><img src="images/miniquilt4.jpg"></a>
    
           </div>

    CSS:

    #main {
    	width:400px;
    	float:left;
    	margin:3px 10px 5px 0px;
    }
    #thumbs {
    	float:left;
    	width:76px;
    }
    #thumbs2 {
    	float:left;
    	width:76px;
    	margin-left: 8px;
    }
    #thumbs a img {
    	width:70px;
    	margin-top:3px;
    	border: 2px dashed #333;
    	padding: 3px;
    }
    #thumbs2 a img {
    	width:70px;
    	margin-top:3px;
    	border: 2px dashed #333;
    	padding: 3px;
    }

    JS:

    function swap(image) {
    		document.getElementById("main").src = image.href;
    	}

    The number of images a product can have varies from 1 to 8. Preferably if there are 1-4 images then there is only a single vertical column to the right of the main image, and 5-8 images there are 2 columns.

    What I would like is to be able to add the gallery to the single product page template. So when a new product page is created all the owner has to do is something like add them to the media library and select their ID's or add their location to custom field.

    I really need someones help to make this happen as I am not knowledgable enough in javascript and php to be able to create this. I cannot find any plugins/widgets that allows the look I am after. Someone said that using the native gallery would let me create this look but I cannot see how.

    Please any help would be greatly appreciated.

    Cheers

    Nat

  2. SpartanCopy
    Member
    Posted 1 year ago #

    For anyone looking to include a lightweight, simple but very customizable slideshow/gallery then I would recommend using portfolio slider

    • Can be embedded directly into your template or it can be applied using a shortcut code [portfolio_slideshow].
    • Simple to configure - A new tab labeled Portfolio Slideshow is added to the settings tab of the dashboard
    • CSS is easy to edit for further styling.
    • Lots of helpful documentation to help you fully customise your look and feel.

    I wanted my thumbnails to the right rather than the top or bottom so I simply floated them to the right and set the thumbnail container width so they would appear in a vertical column.

    You don't need to know any PHP and it saves coding everything from scratch.

Topic Closed

This topic has been closed to new replies.

About this Topic