Question

first time posting here, though have followed some posts every now and again. so, hello all.

got a quick question that i have not found the answer for online etc.
i have a template im taking apart, using it to build my site again, make it just one page, with links that call hidden subpages. keep it simple etc.

but im running into a problem of allowing a picture link in the gallery to pop up a page, rather than the original .png file for info. i like the .png route, but i need to put things like links to external pages and video etc, so a picture link to a sub page is needed, rather than to a .png file.

here is a link [.zip at 3.4mb] to the actual template that you can download and play with to see what i mean.
http://www.smokingbunny.co.uk/downloads/cream%20template.zip

more than likly, and my luck, that it is easy. but i just cant see what to do now. spent a while finding answer and testing routes, but no luck. so this is why im asking.

thanks for any answers in advance

lewis edwards

smokingbunny.co.uk

Answer 1

First, you need to disable the lightbox plugin to prevent your picture click to run that function.

Remove or comment out $('#img_slider li .pic').fancybox({'titlePosition': 'inside', 'overlayColor':'#000'}); on line 88 of scripts.js

Next, you can link to your subpages by using the current picHold div. Add an ID/href (where it will link) to link the anchor.

    <div class="picHold">
<a id="mySubpage" class="pic" rel="Appendix" href="#!/mySubpage"><span class="zoomSp"></span><img src="images/galleryIcon1.jpg" alt=""></a>
</div> 

Then copy your other content containers (li) and give it your newly created ID.

e.g.

            <li id="mySubpage">
                   <div class="box">
                        <div class="closePlane">
                            <a class="closeButton" href="#!/pageGallery"><img src="images/closeIcon.png" alt=""></a>
                     </div>
                    <div class="containerContent">
                    <h2>Subpage Policy</h2>
                        <div class="col1">
                            <div class="Btns1">
                                <a href="#" class="upBtn"></a>
                                <a href="#" class="downBtn"></a>
                            </div>
                            <div class="scroll1">

                                <p class="padBot4">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                <p class="padBot4">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Duis autem vel eum iriure dolor in hendrerit.</p>
                                <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                            </div>
                        </div> 
                    </div>
               </div>
            </li>   

And you’re good to go! Tested/works.