WordPress.org

Ready to get started?Download WordPress

Forums

Help needed in cycling through HTML/CSS gallery (4 posts)

  1. cemo
    Member
    Posted 1 year ago #

    Hi,

    This gallery is made from HTML/CSS. I was wondering if there was a way to cycle through the thumbnails and have the bigger image to change too. Basically, cycle through the UL list. Or, have the hover set on active when the page loads on the first one.

    You can view it here:

    http://www.criticalmood.com/tylersepa/portfolio

    I've been at this for a while now and can't quite figure it out (even looked through jQuery and Javascript but I get lost every time). If anyone can help (even just pointing me to the right resources), it would be greatly appreciated.

    The HTML is this:

    <ul id="tabs">
        <li id="ns_1">
            <a href="#"></a>
            <img src="portfolioslider/branding.png" alt="">
    
        <li id="ns_2">
            <a href="#"></a>
            <img src="portfolioslider/graphicdesigner.png" alt="">
    
        <li id="ns_3">
            <a href="#"></a>
            <img src="portfolioslider/freelance.png" alt="">
    
        <li id="ns_4">
            <a href="#"></a>
            <img src="portfolioslider/assorted.png" alt="">
    
        <li id="ns_5">
            <a href="#"></a>
            <img src="portfolioslider/photography.png" alt="">

    Here is the CSS:

    /* CSS Document */
    
    ul#tabs {
    	margin-left: -30px;
    	height: 373px;
        width: 1100px;
    	list-style: none;
    	list-style-type: none;
    	margin-right: 10px;
    }
    
    li {
        font: bold 16px/100px sans-serif;
        height: 100px;
    	float: left;
    }
    ul#tabs a {
        border-top: 1px solid #444;
        color: red;
        display: block;
        text-align: center;
        text-decoration: none;
        width: 99px;
    }
    li#ns_1 a {
        background: url(portfolioslider/branding-identity-nh.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    	margin-top: 380px;
    	margin-left: 30px;
    }
    li#ns_2 a {
        background: url(portfolioslider/graphic-designer-nh.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    	margin-top: 380px;
    }
    li#ns_3 a {
        background: url(portfolioslider/pure-pwnage-nh.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    	margin-top: 380px;
    }
    li#ns_4 a {
        background: url(portfolioslider/assorted-freelance-nh.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    	margin-top: 380px;
    }
    li#ns_5 a {
        background: url(portfolioslider/photography-nh.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    	margin-top: 380px;
    }
    a:hover {
    }
    li#ns_1 a:hover {
        background: url(portfolioslider/branding-identity.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    }
    li#ns_2 a:hover {
        background: url(portfolioslider/graphic-designer.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    }
    li#ns_3 a:hover {
        background: url(portfolioslider/pure-pwnage.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    }
    li#ns_4 a:hover {
        background: url(portfolioslider/assorted-freelance.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    }
    li#ns_5 a:hover {
        background: url(portfolioslider/photography-button.png) no-repeat;
        border-top: none;
    	width: 196px;
    	height: 64px;
    }
    img {
        display: none;
        height: 373px;
        width: 980px;
        position: absolute;
        right: 0;
        top: 0;
    }
    li#ns_1 img {
    	margin-right: 10px;
    }
    li#ns_2 img {
    	margin-right: 10px;
    }
    li#ns_3 img {
    	margin-right: 10px;
    }
    li#ns_4 img {
    	margin-right: 10px;
    }
    li#ns_5 img {
    	margin-right: 10px;
    }
    a:hover + img,
    img:hover {
        display: block;
    }
  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    Your images don't seem to load for me so I can't see what you're trying to do but it will probably be a lot easier to achieve using a plugin to display your slideshow such as meteor-slides http://wordpress.org/extend/plugins/meteor-slides/

    There are many other slideshow plugins available so if you look at a few of them you may find one which closely fits your needs.

  3. cemo
    Member
    Posted 1 year ago #

    Thanks a lot. I've actually used that slider before, but not to the point of customization. I'm actually using a slider already on the main page (ready made plug-in) and I just customized the look a bit via CSS.

    With the plug-ins I've tried, I haven't been able to do the hover effect on the buttons the way I wanted (simple roll-over). It's usually forcing me to use what's already there. Thus: (1) the thumbnail just duplicates the slide, which isn't what I want, and (2) the hover is not a rollover with the images of my choosing.

  4. cemo
    Member
    Posted 1 year ago #

    I'd be happy if the first thumbnail is automatically loaded hovered on default, just so the middle part wouldn't be blank.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.