title: Not being able to call a jquery plugin method
body: <p>So im practising my jquery/javascript skills. I basically created a website that contains a image plugin (PgwSlider) and the google maps jquery plugin . I have included 4 images in the image plugin so the user can view the different images by clicking on the arrows in the plugin. interface. What I am trying to do is that when the user is looking at the first picture, google maps displays an area . When the user clicks views another picture, the address on the gmaps plugin should also change. I am hardcoding the addresses so its not random. E.g. if the slider show contains pictures of different universities, as the user moves through the picture, the address of the university being displayed in the gmaps should also change relelvent to the picture.</p>
  
  <p>This is my logic:
  Since pgwSlider has a .getCurrentSlide() method, it returns the the current slide. What I am trying to do is create a var and store the .getCurrentslide() in there. And then create an if statements and in each statment, the google maps api should be executed. Like this:</p>
  
  <pre><code>var counter = pgwSlider.getCurrentSlide();
  if(counter == 1){*Create the map to show uni address 1*}
  else if(counter==2){*Create the map to show uni address 2"}
  else if(counter == 3){And so on etc}
  </code></pre>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="gmaps.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script src="pgwslideshow.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="pgwslideshow.min.css"&gt;
  &lt;/head&gt;
  &lt;style&gt;
  #map{
       width: 530px;
       height:400px;
       }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;ul class="pgwSlideshow"&gt;
             &lt;li&gt;
                &lt;img src="http://3vxsjq3roj103wlhf71jhh7t.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/computer-nerd.jpeg"
                   alt="Software Engineer" data-description="Average salary: £37k"&gt;
             &lt;/li&gt;
             &lt;li&gt;
                &lt;img src="http://www.alphasoftware.com/blog/wp-content/uploads/2015/08/Full-stack-Mobile-App-Developer-Job-in-LA.jpg" 
                   alt="Mobile Developer" data-description="Average salary: £33k"&gt;
             &lt;/li&gt;
             &lt;li&gt;
                &lt;img src="http://waqas.club/wp-content/uploads/2014/11/web-developer-lahore.png" 
                   alt="Web Developer" data-description="Average salary: £24k"&gt;
             &lt;/li&gt;
             &lt;li&gt;
                &lt;img src="https://sourcemaking.com/files/sm/images/architect.jpg" 
                   alt="Software Architect" data-description="£62k"&gt;
             &lt;/li&gt;
             &lt;li&gt;
                &lt;img src="http://i2.cdn.turner.com/money/.element/img/1.0/sections/mag/moneymag/bestjobs/2010/snapshot/049_systems_engineer.ju.jpg"
                   alt="Systems Enginner" data-description="£40k"&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
   &lt;div id="map"&gt;
  
          &lt;/div&gt;
  
  &lt;script&gt;
  
  
          $(document).ready(function(){
          var mapCanvas = document.getElementById('map');
              var mapOptions = {
              center: new google.maps.LatLng(44.5403, -78.5463),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(mapCanvas, mapOptions);
  
  
              $(".pgwSlideshow").pgwSlideshow({
          transitionEffect:'fading',
          autoSlide:true
          });
  
          var counter = pgwSlider.getCurrentSlide();
  
          if(counter == 1){
          var mapCanvas = document.getElementById('map');
              var mapOptions = {
              center: new google.maps.LatLng(51.508540, -0.128082),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(mapCanvas, mapOptions);
          }else{
          alert("This will be displayed for testing purposes.");
          }
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My problem is that it doesn't load. It seems to break the page. I also have other plugins in my page and when i use this method, the rest of the plugins doesn't work. </p>
  
  <p>EDIT== Okay so ive managed to make it not break my page and break the rest of the plugins in my website by placing the var and if statement just above the closing script tag. But now my problem is that the if statement doesn't seem to run. Ive tried making if condition like (if counter ==2){alert("executed")} but it doesn't seem to execcute the alert statement when the user views the second image in the slide show.</p>
  
  <p>EDIT 2 == So I've managed to find the main cause of the problem. According to the pgwSlider docs, to use the methods, I first need to initalise a pgwslider variable by writing this:</p>
  
  <pre><code>        var pgwSlider = $('.pgwSlider').pgwSlider();
  </code></pre>
  
  <p>But I've come to know that anything written after that code, it doesn't get executed. I place a simple if statement where I initalise a var counter to 0 and called an alertbox to pop up if counter is equal to zero, which it is. When I place the if statment above the the pgwSlider var, it executes and pops up the alert box. When I place it under the pgwSlider var, it doesn't get executed. Why is this?</p>