PHP | USING A PLUG IN WITH LIGHTBOX

Question

Hey Guys,

I was wondering if a PHP EXPERT could help me out!

I'm using a really cool plug-in https://mixitup.kunkalabs.com/ it basically splits my images into different categories.

I'm also using a lightbox that allows me to open up the image and then select the next image in the array.

The problem is, if I select into one folder, open up an image and try to slide to the next image it pulls the next image which isn't associated with that folder.

    <!-- Begin Portfolio -->
    <section id="section2">

        <div class="container portfolio">

            <!-- Page Title -->
            <div class="row page-title-2">
                <div class="col-lg-12">
                    <h3>Gallery</h3>
                    <hr>
                    <p>List of Our Projects</p>
                </div>
            </div>

            <!-- Gallery Filter -->
            <div data-scroll-reveal="enter left and move 50px over 1s" class="container text-center">
              <ul class="nav nav-pills">
                <li class="filter" data-filter="all">all</li>
                <li class="filter" data-filter="modern">Modern & Handless</li>
                <li class="filter" data-filter="bespoke">Traditional Bespoke</li>
                <li class="filter" data-filter="bedrooms">Bedrooms</li>
              </ul>
            </div> 

            <!-- Gallery Items -->
            <div class="container port-holder">
              <ul id="myPortfolio" class="no-padding">

                <?php 
                /*shuffle($images);*/ //Random Order
                foreach($images as $project_id => $image) { ?>

                    <li class="item <?php echo $image["class"]; ?> col-xs-4 no-padding">

                        <a  href='<?php echo $image["img-main"]; ?>' data-lightbox="example-set" data-title='<?php echo $image["text"]; ?>'>
                            <img class="example-image" src='<?php echo $image["img-thumb"]; ?>' alt=""/>
                            <span class="portfolio-hover">
                              <span>
                                <span class="portfolio-title"><?php echo $image["title"]; ?></span><br>
                                <span class="portfolio-category"><?php echo $image["description"]; ?></span>
                              </span>
                            </span>
                        </a>

                    </li>

                <?php } ?>

              </ul>
            </div>

        </div>

    </section>
    <!-- End Portfolio -->

Anyone got any ideas??

Thanks!

Joe

Answer 1 · 2014-08-04T18:56:18Z

August 4, 2014 6:56pm

Hey Joe!

It sounds like all the stuff you have running over the top is javascript? I think your problem might be coming from mixing up front and back end sources..

My long-shot guess would be that - although you're sorting the images with javascript - this isn't rearranging the base-array you have in php? So the images maintain their order, even though they appear randomized on the front end. A good way to test for this is a lot of var_dump($array) -ing. You should be able to narrow it down pretty quickly by seeing how the php array is reacting.

If this is the case, you'll need to either sort the php array, or transfer the php array to a JSON format (which is essentially an array javascript can read and sort through), and source your pages from that.

You could also try ajax but generally speaking, I find that if you can get it to work without the javascript, it will be both unobtrusive and a lot easier to stick the javascript on top. Once everything is running smoother than my best chat-up line, I would then remove php elements and append javascript elements (using javascript) so it works in any situation.

I hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

Joe Li

Joe Li

PHP | USING A PLUG IN WITH LIGHTBOX

1 Answer

thomascawthorn

thomascawthorn

Joe Li

Joe Li