Changing a jscript variable each time a php include is loaded

Question

I have created a page that displays a product list from a database on my home page. When the user clicks on any of the products, a modal is opened and this modal contains product info, as well as a image gallery.

    $product_handler = new Product ($cao);
    $products = $product_handler->getProducts();
    if($products) {
        /* @var $prod Product */
        foreach ($products as $key => $prod) {


            ?>
            <div class="col-md-4" style="overflow: hidden;">
            <img class="image-modal"  data-toggle="modal" style="width: 192px; height:192px;"  data-target="#<?php echo $prod->prod_name;?>Modal" src="<?php echo $prod->prod_icon; ?>">
            <a data-toggle="modal"  data-id="<?php echo $prod->prod_name ?>"  data-target="#<?php echo $prod->prod_name;?>Modal" class="image_modal"><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></a>
</div>  
    <!--------Modal starts here-------->
    <?php
$pres_path= "dub/place/folder/Presentation.php";


include $pres_path;
?>  
     <?php   
        }
    }

Then within the Presentation.php file the modal is called and this contains all the product info and the image gallery.The page also contains a big chunk of javascript used to navigate the images in the gallery.

In this javascript section I have a variable that is used to determine what the current image is.

    <script> 

    var currentImage = 1;
                            $('a.galleryBullet' + currentImage).addClass("active");
                            $('a.thumbnailsimage' + currentImage).addClass("active");
                            $('div.description' + currentImage).addClass("visible");

//Previous Arrow

                        $('a.previousSlideArrow').click(function () {
                            $('img.previewImage' + currentImage).hide();
                            $('a.galleryBullet' + currentImage).removeClass("active");
                            $('a.thumbnailsimage' + currentImage).removeClass("active");
                            $('div.description' + currentImage).removeClass("visible");

                            currentImage--;
                            if (currentImage == 0) {
                                currentImage = imagesTotal;
                            }
                            $('img.previewImage' + currentImage).show();
                            $('a.galleryBullet' + currentImage).addClass("active");
                            $('a.thumbnailsimage' + currentImage).addClass("active");
                            $('div.description' + currentImage).addClass("visible");

                            return false;
                        });




</script>

The problem I have is that when I click on one product and navigate the gallery,and then close the modal and select another product. It continues on the same number as the one I ended on in the previous modal.

In example. In modal 1 there is 5 slides and I close the modal on slide no. 3.If I then open modal 2 which contains 7 slides. I will start on slide no. 3

The reason for this I think, is because the variable currentImage is used by all of the modals. And thus, problems arise

My question is,

How can I make sure that each time a product is clicked, that the variable currentImage is set to 1

Jonas Wilms · Accepted Answer · 2016-08-31 12:25:53Z

1

Create an own scope for each of your "modals":

(function(){
 var currentImage=1;
 alert(currentImage);//1
 //...
 })();
 alert(currentImage);//undefined

So a "scope model" for all of your modals would look like:

 window.unknownfunction1.currentImage;
 window.unknownfunction2.currentImage;

Before it was:

window.currentImage;

edited Aug 31, 2016 at 12:25

answered Aug 31, 2016 at 12:04

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Albertus Brand Venter Over a year ago

Not quite sure what you mean. Is there any additional info I can provide for you to explain using a example?

Jonas Wilms Over a year ago

@Albertus Brand Venter (by the way, where are you from?) : i think your problem is that the loaded javascripts all use the same variable and override each other, or am i wrong?

Albertus Brand Venter Over a year ago

You are correct. The variable is used in the php file that contains the modal. And each product uses the same php file. So I think they are all using the same global variable. From SA, why?

Jonas Wilms Over a year ago

@Albertus Brand Venter: my answer creates a new scope. So the variable is not part of the global window object, every js has its own scope and theres no chaos ( its easier to explain in a native language, and your name sounded quite "german")

Albertus Brand Venter Over a year ago

Can I perhaps show you my code. It might make it much easier to understand. pastebin.com/qanD9QzU

|

Collectives™ on Stack Overflow

Changing a jscript variable each time a php include is loaded

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related