Fancybox Help

JavaScript
,
1

Hello

I tried this fancybox and highslide.js libraries, but they didn’t work…they’re basically a clickable thumbnail, when you click it, it opens an image gallery. here is a working demo:

but it doesn’t work…on my website, here is the html:

<!-------- Projects Section -------->
<section class="container-fluid section-project" id="project">
    <div class="row">
       <div>
        <b class="col-lg-10
                  col-md-10
                  col-sm-10
                  col-xs-10
                  col-lg-push-1
                  col-md-push-1
                  col-sm-push-1
                  col-xs-push-1 b2">Projects</b>
       </div>
   </div>
<br>
       <!-------- SlideShow -------->
<div id="carousel">

<a href="" class="navigation previous">&laquo;</a>
<a href="" class="navigation next">&raquo;</a>

<ul>
			   <!-------- Architecture -------->
    <li><img class="flip" src="imgs/cover/Architecture.png"/></li>
    <li><img src="imgs/cover/inmaeya.jpg"/></li>
    <li><img src="imgs/cover/wesal.jpg"/></li>
    <li><img src="imgs/cover/baytoti.jpg"</li>
               <!-------- Interior -------->
    <li><img class="flip" src="imgs/cover/interior.png"/></li>
    <li><img src="imgs/cover/wakame.jpg"/></li>
    <li><img src="imgs/cover/lomar.jpg"/></li>
    <li><img src="imgs/cover/meraki.jpg"/></li>
    <li><img src="imgs/cover/tarhati.jpg"/></li>
               <!-------- Micro-Architecture -------->
                        <li><img class="flip" src="imgs/cover/micro.png"/></li>
    <li><img src="imgs/cover/hafiz.jpg"/></li>
    <li><img src="imgs/cover/mts.jpg"/></li>
              <!-------- Graphic Identities -------->
                       <li><img class="flip" src="imgs/cover/graphic.png"/></li>
    <li><img src="imgs/cover/shukri.jpg"/></li>
    <li><img src="imgs/cover/bq2.jpg"/></li>
    <li><img src="imgs/cover/meraki2.jpg"/></li>
              <!-------- Wayfinding -------->
                    <li><img class="flip" src="imgs/cover/wayfinding.png"/></li>
    <li><img src="imgs/cover/bq.jpg"/></li>
    <li><img src="imgs/cover/tas.jpg"/></li>
</ul>
</div>
                   
</section>
<script src="js/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/common.js"></script>

I have removed the fancybox and highslide libraries from the script src because they didn’t work. Also, all these images in the htmml will be the thumbnail for each image gallery.

2

In what sense do they “not work”? You need to be more specific about the issue if you want assistance in resolving it.

3

when I click the images to open the gallery, it doesn’t open it, it opens the image in a new page.

4

That sounds as if you’ve simply configured the script/page incorrectly. Decide which script you want to use for this and set up a demo page so that others can help you debug it.

5

This likely means that fancybox either isn’t loaded correctly, or that it doesn’t apply to the thumbnail links so that they just behave like regular links. Does the console give any hints?

x-post ^^

6

I read that I need different versions of Jquery because the new one doesn’t support lightbox or fancy box…
But no, I don’t wanna add more than 1 Jquery library in order to make a simple fancy box work…there has to be another way.

and no…the console have nothing

7

Highslide doesn’t use JQuery at all (and I’m sure you could find other alternatives).

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.