1

I have been searching the internet trying to solve a problem, and have found a lot of solutions which non have worked which leads me to believe that non of the solutions were a fit to my unique situation.

I am building a page with Bootstrap and at the bottom of the HTML there is a call for a jquery script "js/jquery-1.11.3.min.js" and this controls things like the Bootstrap navbar drop-downs. And I have another jquery call in the head, and this controls a photo gallery. If I delete the call for "js/jquery-1.11.3.min.js" the photo gallery works great, but my navbar drop-downs stop working, and if I leave the call for "js/jquery-1.11.3.min.js" then the navbar works but the photo gallery stops working..

I tried just using one call but unfortunately the photo gallery will only work with it's call and the navbar will not work with the photo gallery's jquery version.

Here is the code for the page! Any help would be great!

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
 Set objWPC = Server.CreateObject("RealtySearch.RSPublic")
 Call objWPC.ListingIsValid(Request.QueryString("LI"))
 Set objWPC = Nothing
%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<%
   Set objMeta = Server.CreateObject("RealtySearch.RSPublic")
   ' Process Request Arguments: Command, Template, PageSize, LogoId, AgencyId, CityId, ListingId, FeatureId
   strUCCmd = UCase(Request.QueryString("CMD"))
   If strUCCmd = "RESDETAIL" Or strUCCmd = "COMDETAIL" Then
      Call objMeta.ProcessRequest("ListingMeta")
   End If
   Set objMeta = Nothing
%>
    <!-- Bootstrap -->
 <link href="css/bootstrap.css" rel="stylesheet">
 <link href="css/ILPStyles.css" rel="stylesheet" type="text/css">
 <link href="css/RealtySearch.css" rel="stylesheet" type="text/css">

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
  
  .container{
            width:100%;
            margin: auto;
            margin-top: none;
   position: relative;
  }
        @media (max-width: 768px) {
            .inner-text {
                font-size: 10px;
            }
            .container{
                width:100%;
            }
        }
 </style>
<link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>
<script type="text/javascript">
  $(document).ready(
   function() {
    $(".container").wtGallery({
     num_display:3,
     screen_height:360,
     padding:10,
     thumb_width:75,
     thumb_height:56,
     thumb_margin:5,
     thumbnails_align:"bottom",
     text_align:"top",
     caption_align:"bottom",
     auto_rotate:false,
     delay:5000,
     rotate_once:false,
     auto_center:true,
     cont_imgnav:true,
     cont_thumbnav:true,
     display_play:false,
     display_imgnav:true,
     display_imgnum:false,
     display_timer:false,
     display_thumbnav:true,
     display_indexes:true,
     display_thumbnum:false,
     display_tooltip:false,
     display_arrow:true,
     mouseover_pause:false,
     mouseover_text:false,
     mouseover_info:true,
     mouseover_caption:true,
     mouseover_buttons:true,
     transition:"fade",
     transition_speed:800,
     scroll_speed:600,
     vert_size:45,
     horz_size:45,
     vstripe_delay:100,
     hstripe_delay:100,
     move_one:false,
     shuffle:false,
     mousewheel_scroll:true
    });
   }
  );
 </script>
  </head>
  <body>
 <div class="container-fluid">
   <div class="row" id="topbrownbar">&nbsp;</div>
   <div class="row" id="bigpictcont-pages" style="position: relative; min-height: 23em; max-height: 350px; background-image: url(images/pages-header.jpg); background-size: cover;">
    <div style="position: absolute; top: -20px; right: 30px; z-index: 4000; color: whitesmoke;">
     <div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></div>
     <div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
      <div style="float: right"><h3> 208-217-1776</h3></div>
    </div>
     <div id="topblackbar">&nbsp;</div>
    <div style="position: absolute; bottom: 10%; z-index: 3000; width: 100%;"><a href="index.asp"><img style="margin: 0 auto;" src="images/ILP-logo.png" class="img-responsive" alt="Placeholder image"></a></div>
      </div>
   <div class="row" id="buttoncont">
     <div class="col-lg-offset-1 col-lg-12">
       <nav class="navbar navbar-default">
         <div class="container-fluid">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
           <!-- Collect the nav links, forms, and other content for toggling -->
           <div class="collapse navbar-collapse" id="defaultNavbar1">
             <ul class="nav navbar-nav">
               <li><a href="index.asp">Home</a></li>
     <li><a href="#">Buck's<br><span style="font-size: 0.7em;">Listings</span></a></li>
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Property<br><span style="font-size: 0.7em;">Search</span><span class="caret"></span></a>
                 <ul class="dropdown-menu">
                   <li><a href="waterfront.asp">Waterfront Lifestyle</a></li>
                   <li><a href="Schweitzer.asp">Schweitzer Lifestyle</a></li>
                   <li><a href="residential.asp">Ranch Lifestyle</a></li>
                   <li><a href="residential.asp">Preparedness Lifestyle</a></li>
                   <li role="separator" class="divider"></li>
                   <li><a href="#">Developments</a></li>
                   <li role="separator" class="divider"></li>
                   <li><a href="bareland.asp">Land Listings</a></li>
                   <li><a href="commercial.asp">Commercial Listings</a></li>
                    </ul>
                  </li>
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Visitor's<br><span style="font-size: 0.7em;">Guide</span><span class="caret"></span></a>
                 <ul class="dropdown-menu">
                   <li><a href="#">Inspectors</a></li>
                   <li><a href="#">Surveyors</a></li>
                   <li><a href="#">Planning & Zoning</a></li>
                   <li role="separator" class="divider"></li>
                   <li><a href="#">Septic & Sewer</a></li>
                   <li role="separator" class="divider"></li>
                   <li><a href="#">Home Inspectors</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Resources</a></li>
                  <li><a href="#">Bio</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Maps</a></li>
                </ul>
<ul class="nav navbar-nav navbar-right">
              <li></li>
               <li class="dropdown">
<ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>
                   <li><a href="#">Something else here</a></li>
                   <li role="separator" class="divider"></li>
                   <li><a href="#">Separated link</a></li>
                    </ul>
              </li>
                </ul>
              </div>
           <!-- /.navbar-collapse -->
            </div>
         <!-- /.container-fluid -->
          </nav>
      </div>
      </div>
   <div class="row" id="mainwoodcont" style="position: relative">
     <div class="col-lg-offset-1 col-lg-12 col-md-12 col-md-offset-1">
       <h1>Ranch Lifestyle Properties in <strong>North Idaho</strong></h1>
     </div>
</div>
   <div class="row pagescont">
     <div class="col-lg-offset-1 col-lg-12">&nbsp;</div>
<div class="col-lg-offset-1 col-lg-1">&nbsp;</div>
     <div class="col-lg-10">
        <div class="fluid detailpagecont">
<%
   Set objApp = Server.CreateObject("RealtySearch.RSPublic")
   If len(Request.QueryString("CMD")) = 0 then
      Call objApp.ProcessRequest("ResSelect")
   Else
      Call objApp.ProcessRequest
   End If
   Set objApp = Nothing
%>
              </div>
  </div>
     <div class="col-lg-1">&nbsp;</div>
     <div class="col-lg-offset-1 col-lg-12">&nbsp;</div>
      </div>
   <div class="row" id="footer" style="margin-top: 10px;">
     <div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-6 col-xs-5 col-xs-offset-5 col-md-offset-6 col-sm-offset-5">
       <h4>IdahoLifestyleProperty.com</h4>
       <p>Buck Graybill&nbsp;REALTOR®<br>
         Member of the&nbsp;REALTORS® Land Instatute</p>
       <img style="margin: 5px 10px 5px 5px;" align="left" src="images/RLIlogo.jpg" width="60" height="85" alt=""/>
       <p> 208-217-1776 <br>
         Buck@Sandpoint.com<br>
          </p>
       <img src="images/footer-hud-logos.png" alt="" width="100" height="32" class="img-responsive"/>&nbsp;</div>
     <div class="col-lg-4 col-md-12 col-md-offset-1 col-lg-offset-0" align="center"><img src="images/c21logo-footer.png" width="212" height="132" alt=""/>
       <p class="text-center">316 N. 2nd Avenue, Suite A-1 Sandpoint, Idaho 83864 office <br>
         (208) 255-2244</p>
     </div>
     <div class="col-lg-4">
       <div class="row">
     <div class="col-md-offset-1 col-md-6 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-residential-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
     <div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-land-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
     <div class="col-md-6 col-md-offset-1 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-waterfront-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
     <div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-commercial-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
          </div>
     </div>
      </div>
   <div class="row" id="copyright">
     <p class="text-center">All Rights Reserved © <script type="text/javascript">document.write((new Date()).getFullYear());</script> IdahoLifestyleProperty.com</p>
      &nbsp;</div>
 </div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 <script src="js/jquery-1.11.3.min.js"></script>

 <!-- Include all compiled plugins (below), or include individual files as needed --> 
 <script src="js/bootstrap.js"></script>
  </body>
</html>
  • Load scripts in this order, jQuery,bootstrap,jquery.wt.gallery and then your script tag. Also only load single jQuery. – azs06 Feb 22 '17 at 22:01
  • Same thing I re-arranged the script calls as requested with a single jQuery call and it either works with one or the other not both at the same time.. Either "js/jquery-1.7.1.min.js" the gallery works or "js/jquery-1.11.3.min.js" and the navbar works. – Lenz Clan 187 Feb 22 '17 at 22:55
  • Can I load two jQuery calls? – Lenz Clan 187 Feb 22 '17 at 23:01
  • Possible but not recommended, check this answer http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page – azs06 Feb 22 '17 at 23:07
  • I have tried those answers with no success.. Can you use my code that I attached and tweek to show me what I should be doing differently? I need to have both jQuery scripts (jquery-1.11.3.min.js and jquery-1.7.1.min.js) to execute so both the photo gallery and navbar work.. – Lenz Clan 187 Feb 22 '17 at 23:29
  • Would it be possible for you to create a jsfiddle link, seems like the gallery plugin you are using is a paid plugin, consider updating it? – azs06 Feb 23 '17 at 11:01
  • Yes it is a plug-in bought from CodeCanyon, but the developer is no longer offering support or updates.. I am not familiar with jsfiddle, but I will look into it! – Lenz Clan 187 Feb 23 '17 at 22:50
  • Consider using something else for gallery, there are like tons of free good ones out there, here is an example no how you can load different version of jquery and use it https://jsbin.com/kaqupoc/edit?html,js,output. You could load bootstrap `var $jq1 = jQuery.noConflict(true);` add it in a script tag, then load your gallery, it should work. – azs06 Feb 24 '17 at 10:41

0 Answers0