one page responsive template - lightbox not working

Discussion in 'Web Design' started by wdesign, Dec 19, 2014.

to remove all ads.
  1. wdesign

    wdesign New Member

    Messages:
    2
    Hi,
    I was hoping someone could help me with applying a lightbox to portfolio images. It seems the images are placed through CSS and not embedded on the page. There is an image rollover CSS rule but the template wasn't finished with the lightbox.

    This is what it should look like:
    http://www.templatemo.com/templates/templatemo_406_flex/

    This is the site I'm working on:
    http://wswdesign.com

    The images under "latest work" are placed in the page the ones under "portfolio" are added through CSS and don't show on the page until going live.

    Thank you graciously for any help´┐╝

    Here is an example of my code for one image:
    <ul class="portfolio">
    <li class="item design">
    <div class="portfolioitem">
    <img src="img/print1.jpg">
    <div class="portfoliohover">
    <div class="info">
    <h1>+</h1>
    <h5>trade show graphics</h5>
    <h6><b class="light-gray">Celguard / Membrana</b></h6>
    </div>
    </div>
    </div>
    </li>
     
    Last edited: Dec 19, 2014
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,638
    If you have a "#" in the href ... ... a click is ALWAYS going to refresh the page unless you return 'null' and prevent the event from 'bubbling' the onclick event up from your handler.
     
  3. wdesign

    wdesign New Member

    Messages:
    2
    HI there thanks for responding. I don't see where the empty "#" link is. I was thinking I need a CSS rule for the lightbox?
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,638
    HTML:
    <!-- Start Single Block -->
    <li>
    	<div class="section block">	
    		<img src="img/placeholder_large2.jpg">
    		<div class="content">
    			<h5>NASCAR Race Car Graphics</h5>
    			<h6>Vehicle Sponsorship</h6>
    		</div>
    		<div class="hover">
    			<a href="#" class="hover content">
    				<h2>+</h2>
    				<h5>Type Work</h5>
    				<h6>Print Design</h6>
    			</a>
    		</div>	
    	</div>
    </li>
    <!-- End Single Block -->
    
    But if you want a lightbox style 'popup' you need the lightbox style javascript or whatever it is you want to "popup" using CSS has to exist in the source as child element of the hover target.
     

Share This Page