10 Replies Latest reply: Mar 21, 2013 8:14 AM by Roopavathy RSS

    Problem in responive photo gallery

    Roopavathy Community Member

      I have inserted the yoxview  photo gallery from this website http://www.yoxigen.com/yoxview/.Here is the code.

       

      <!doctype html>

      <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

      <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

      <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

      <!--[if gt IE 8]><!-->

      <html class=""><!-- InstanceBegin template="/Templates/Vestrytemplate.dwt" codeOutsideHTMLIsLocked="false" -->

      <!--<![endif]-->

      <head>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- InstanceBeginEditable name="doctitle" -->

       

      <title>Photo Gallery</title>

      <script type="text/javascript" src="yoxview/yoxview-init.js">

      </script>

      <script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>

      <script type="text/javascript">

                  $(document).ready(function(){

                      $("#thumbnails").yoxview({

                       backgroundColor: 'Blue',

                       playDelay: 5000

                      });

                  });

      </script>

       

       

      <link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">

       

      <!-- InstanceEndEditable -->

      <link href="boilerplate.css" rel="stylesheet" type="text/css">

      <link href="CSS/Layout.css" rel="stylesheet" type="text/css">

       

      <link rel="stylesheet" href="flexslider.css" type="text/css">

       

      <link href="css/flexnav.css" rel="stylesheet" type="text/css" />

       

      <style type="text/css">

      body {

          background-color: #E9E9E9;

      }

      </style>

       

      <style>

      footer

      {

          min-height: 80px;

          background: #000;

          border-top-width: 2px;

          border-top-style: solid;

          border-top-color: #C7E003;

      }

       

      </style>

       

      <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>-->

      <script src="jquery.min.js"></script>

      <script src="jquery.flexslider.js"></script>

       

      <!-- Place in the <head>, after the three links -->

      <script type="text/javascript" charset="utf-8">

        $(window).load(function() {

          $('.flexslider').flexslider();

        });

      </script>

       

       

      <!--

      To learn more about the conditional comments around the html tags at the top of the file:

      paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

       

      Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

      * insert the link to your js here

      * remove the link below to the html5shiv

      * add the "no-js" class to the html tags at the top

      * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build

      -->

      <!--[if lt IE 9]>

      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

      <![endif]-->

       

      <!--[if lt IE 9]>

      <link href="IE-only.css" rel="stylesheet" type="text/css">

      <![endif]-->

       

      <script src="respond.min.js"></script>

      <!-- InstanceBeginEditable name="head" -->

      <!-- InstanceEndEditable -->

      </head>

      <body>

      <div class="gridContainer clearfix">

        <div id="LayoutDiv1"><img src="SJV-Images/Banners/LimeGreenheader-new-curved.png"/></div>

        <div id="Nav">

      <div class="menu-button">Navigation</div>

          <nav>

                <ul data-breakpoint="800" class="flexnav">

                  <li><a href="">Home</a>

                 <!--   <ul>

                      <li> <a href="#content">Sub 1 Item 1</a></li>

                      <li><a href="">Sub 1 Item 2</a></li>

                      <li><a href="">Sub 1 Item 3</a></li>

                      <li><a href="">Sub 1 Item 4</a></li>

                    </ul> -->

                  </li>

                  <li><a href="">Profiles</a>

                    <ul>

                      <li><a href="">Sub 1 Item 1</a></li>

                      <li><a href="">Sub 1 Item 2</a>

                        <ul>

                          <li><a href="">Sub 2 Item 1</a></li>

                          <li><a href="">Sub 2 Item 2</a></li>

                          <li><a href="">Sub 2 Item 3</a></li>

                        </ul>

                      </li>

                      <li><a href="">Sub 1 Item 3</a>

                        <ul>

                          <li><a href="">Sub 2 Item 1</a></li>

                          <li><a href="">Sub 2 Item 2</a>

                            <ul>

                              <li><a href="">Sub 3 Item 1</a></li>

                              <li><a href="">Sub 3 Item 2</a></li>

                              <li><a href="">Sub 3 Item 3</a></li>

                            </ul>

                          </li>

                        </ul>

                      </li>

                    </ul>

                  </li>

                  <li><a href="">Photo Gallery</a>

                   <!-- <ul>

                      <li><a href="">Sub 1 Item 1</a></li>

                      <li><a href="">Sub 1 Item 2</a></li>

                      <li><a href="">Sub 1 Item 3</a></li>

                    </ul> -->

                  </li>

                  <li><a href="">Alumni</a>

                   <!-- <ul>

                      <li><a href="">Sub 1 Item 1</a></li>

                      <li><a href="">Sub 1 Item 2</a></li>

                      <li><a href="">Sub 1 Item 3</a></li>

                    </ul> -->

                  </li>

                  <li><a href="">Contact Us</a>

                <!--    <ul>

                      <li><a href="">Sub 1 Item 1</a></li>

                      <li><a href="">Sub 1 Item 2</a></li>

                      <li><a href="">Sub 1 Item 3</a></li>

                    </ul> -->

                  </li>

                </ul>

              </nav>

       

        </div> <!-- End div id="Nav"  -->

       

       

       

        <div id="LayoutDiv2">

        <!-- InstanceBeginEditable name="Vestry-Content" -->                     

               <!--   <script>

                  if (Galleria) { $("body").text('Galleria works') }

              </script>-->

       

       

      <div class="yoxview">

      <h3>   Photo Gallery</h3>

      <a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>

          <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>

           <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>

       

          <!--<img src="photo1.jpg">

          <img src="photo2.jpg">

          <img src="photo3.jpg">-->

      </div>

      <!--<script>

          Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');

       

      Galleria.run('#galleria');

      </script>-->

       

       

      <!-- InstanceEndEditable -->

      </div>

        <!--

        <div id="footer">This is the content for Layout Div Tag "footer"</div> -->

      </div>

      <footer></footer>

       

      <script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

       

      <script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>

      </body>

      <!-- InstanceEnd --></html>

       

       

       

      The plug-in works.But i want to increase the height of the div with the class = yoxview.But i couldn't find the such class.Here is the css.

       

       

      /* YoxView v2.0 CSS file */

      #yoxview .yoxview_bottom{ bottom: 0; }

      #yoxview .yoxview_right{ float: right; }

      #yoxview .yoxview_left{ float: left; }

       

      #yoxview_popupWrap

      {

          position: fixed;

          top: 0;

          left: 0;

          width: 100%;

          height: 100%;

          display: none;

          z-index: 100;

      }

      #yoxview

      {

          position: absolute;

          font-family: Arial, Sans-Serif;

          z-index: 999;

          border: solid 1px #999;

          overflow: hidden;

          font-size: 10pt;

          text-align: left;

          max-height: 1000px;

      }

      #yoxview a img, #yoxview_infoPanel a img{ border: none; }

      #yoxview a:focus{ outline: none; }

      #yoxview div.yoxview_imgPanel{ position: absolute; top: 0; left: 0; }

      #yoxview div.yoxview_mediaPanel

      {

          position: absolute;

       

          background: #191919;

          width: 100%;

          height: 100%

      }

      #yoxview .yoxview_ctlBtn

      {

          position: absolute;

          z-index: 3;

          display: block;

          text-decoration: none;

          outline: none;

          width: 50%;

          height: 100%;

      }

      #yoxview .yoxview_ctlBtn img

      {

          position: absolute;

          border: none;

          top: 50%;

          margin-top: -22px;

      }

      #yoxview a.yoxview_ctlBtn:focus, #yoxview a.yoxview_ctlBtn:active{ outline: none; outline: none;}

      #yoxview .yoxview_notification

      {

          width: 59px;

          height: 59px;

          position: absolute;

          top: 50%;

          left: 50%;

          margin-top: -30px;

          margin-left: -30px;

          z-index: 4;

          opacity: 0.6;

          filter: alpha(opacity=60);

          background-image: url(images/sprites.png);

          background-repeat: no-repeat;

          display: none;

      }

       

      #yoxview #yoxview_ajaxLoader img

      {

          padding: 13px;

      }

      #yoxview .yoxview_popupBarPanel

      {

          position: absolute;

          z-index: 4;

          min-height: 70px;

          width: 100%;

          right: 0;

      }

      #yoxview #yoxview_menuPanel

      {

          width: 145px;

          height: 42px;

          padding-top: 0px;

          padding-right: 9px;

          position: absolute;

          right: 0;

          background: url(images/sprites.png) no-repeat left -77px;

          background: rgba(0, 0, 0, 0.8);

          -moz-border-radius: 0 0 0 15px;

          -webkit-border-radius: 0 0 0 15px;

          border-radius: 0 0 0 15px;

          top: -42px;

      }

       

      #yoxview #yoxview_menuPanel a

      {

          display: block;

          width: 45px;

          float: right;

          text-align: center;

          font-size: 0.8em;

          position: relative;

          margin-top: -5px;

          padding-bottom: 13px;

          text-decoration: none;

          font-family: Arial, Sans-Serif;

      }

      #yoxview #yoxview_menuPanel a span{ color: White; display: block; margin-bottom: 3px;  }

      #yoxview #yoxview_menuPanel a.last{ margin-left: 0; }

      #yoxview #yoxview_menuPanel a:focus{ outline: none; }

      #yoxview_infoPanel

      {

          position: absolute;

          bottom: 0;

          width: 100%;

          height: 0;

          color: White;

          z-index: 2;

          overflow: hidden;

      }

      #yoxview_infoPanel #yoxview_infoPanelBack

      {

          position: absolute;

          width: 100%;

          height: 100%;

          z-index: 1;

          left: 0;

          top: 0;

      }

      #yoxview_infoPanel #yoxview_infoPanelContent

      {

          position: absolute;

          width: 100%;

          z-index: 2;

          top: 0;

          left: 0;

      }

      #yoxview_infoPanel span#yoxview_count

      {

          display: block;

          width: 55px;

          font-size: 0.8em;

          float: left;

          text-align: center;

          padding-top: 8px;

          color: #bbb;

      }

      #yoxview_infoPanel #yoxview_infoText

      {

          margin: 0 55px;

          font-size: 12pt;

          padding: 5px 0;

      }

      #yoxview_infoPanel #yoxview_infoText #yoxview_infoTextDescription

      {

          margin-top: 1em;

          font-size: 10pt;

          padding-bottom: 0.5em;

          max-height: 200px;

          overflow: auto;

          padding-right: 10px;

      }

      #yoxview_infoPanel #yoxview_infoText a, #yoxview .yoxview_error a{ color: #a7d557; text-decoration: none; outline: none; }

      #yoxview_infoPanel #yoxview_infoText a:hover, #yoxview .yoxview_error a:hover{ color: #d5eeaa }

      #yoxview_infoPanel a.yoxviewInfoLink

      {

          display: none;

          opacity: 0.8;

          float: right;

          margin-right: 5px;

          margin-top: 5px;

      }

      #yoxview_infoPanel a.yoxviewInfoLink:hover{ opacity: 1 }

      #yoxview #yoxview_helpPanel

      {

          display: none;

          width: 201px;

          height: 312px;

          position: absolute;

          top: 50%;

          left: 50%;

          margin-top: -171px;

          margin-left: -111px;

          z-index: 5;

          color: White;

          padding: 20px;

          padding-top: 10px;

          cursor: pointer;

      }

      #yoxview #yoxview_helpPanel h1{ font-family: Arial Black, Arial, Sans-Serif; font-size: 1em; }

      #yoxview #yoxview_helpPanel p{ margin-top: 80px; }

      #yoxview #yoxview_helpPanel span#yoxview_closeHelp{ display: block; position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; }

      #yoxview .yoxview_error

      {

          display: block;

          text-align: center;

          color: White;

          font-family: Arial, Sans-Serif;

          font-size: 14pt;

          top: 41%;

          width: 100%;

          height: 20%;

          position: absolute;

          padding: 10px;

      }

      #yoxview .yoxview_error .errorUrl{ font-size: 10pt; }

      #yoxview .yoxview_top{ top: 0; width: 50%; }

      #yoxview .yoxview_element{ width: 100%; height: 100%; position: absolute;  border: none; background: #333; }

       

      .yoxview-thumbnails a

      {

          float: left;

          margin: 4px;

          /* For thumbnails opacity: */

          opacity: 0.8;

          filter: alpha(opacity=80);

      }

      .yoxview-thumbnails a:hover

      {

          /* For thumbnails opacity: */

          opacity: 1;

          filter: alpha(opacity=100);

      }

      .yoxview-thumbnails a img

      {

          /* Set white borders around the thumbnails, instead of the browser's default Blue: */

          border: solid 1px #ffffff;

      }

      .yoxview-thumbnails-details{ margin-bottom: 1em; }

      .yoxview-thumbnails-details h2{ margin-bottom: 0; padding: 0; font-size: 1.2em; font-weight: bold;}

       

       

      Yoxview_Height.JPG

       

       

       

       

       

       

      Where i could increase the height of the div?Pls help me.

        • 1. Re: Problem in responive photo gallery
          Nancy O. MVP

          Division height is normally determined by the amount of content it holds. 

          Small content = little height. 

          Longer content = bigger height. 

           

          For better answers, we need a URL to your test page.

           

           

          Nancy O.

          • 2. Re: Problem in responive photo gallery
            Roopavathy Community Member

            I don't have URL.Now only i am developing my page.Its my first responsive website.

            • 3. Re: Problem in responive photo gallery
              Roopavathy Community Member

              http://www.yoxigen.com/yoxview/usage.aspx#installation

               

              Please visit this link.Here in the first step,they have said to add class=yoxview.I did the same.But i couldn't find it in CSS.I have added these links.

               

              <script type="text/javascript" src="yoxview/yoxview-init.js">

              </script>

              <script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>

              <script type="text/javascript">

                          $(document).ready(function(){

                              $("#thumbnails").yoxview({

                               backgroundColor: 'Blue',

                               playDelay: 5000

                              });

                          });

              </script>

                             

              <link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">

               

               

              HTML Markup

               

               

               

              <div class="yoxview">

              <h3>  Photo Gallery</h3>

              <a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>

                  <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>

                   <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>

               

               

              Please help.

              • 4. Re: Problem in responive photo gallery
                sudarshan.t MVP

                They've asked you to add a class=yoxview because the javascript that controls the gallery is hardcoded to find all images under class=yoxview and then turn them into a gallery.

                 

                If you want to increase your DIV height, you have 2 options:

                 

                1. Add a new class .yoxview to your CSS (even if it doesn't already have one) and define a height to it
                2. Wrap your gallery within another DIV and assign height to it

                 

                For 2nd option, you dont have to touch the original yoxview.css. You can add to your site CSS. Something like this:

                 

                .gallerybox{

                min-height: 400px;

                }

                 

                And your HTML will become this:

                 

                <div class="gallerybox">

                <div class="yoxview">

                <h3>  Photo Gallery</h3>

                <a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt=" First" width="100" height="97" title="First image" /></a>

                <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt=" Second" width="100" height="97" title="Second image" /></a>

                <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>

                </div> <!--Closes yoxview div-->

                </div> <!--Closes gallerybox div-->

                • 5. Re: Problem in responive photo gallery
                  Roopavathy Community Member

                  Oh!I tried these two methods?But no change.What could i do?Is there any changes to be done in Javascript file?Pls help.

                  • 6. Re: Problem in responive photo gallery
                    sudarshan.t MVP

                    You should really pick up a domain name & hosting so it is easier for us to help troubleshoot instead of having to go to multiple plugin sites, copying & pasting your code in new documents.

                     

                    In India, you can pick up a domain + hosting for as low as Rs.1,000 for 1 year. That's nothing at all, especially when you're trying to make a living out of creating websites.

                    • 7. Re: Problem in responive photo gallery
                      Roopavathy Community Member

                      Yes i know.We will be uploading the site next week.I am developing this site for an institution.So i couldn't now.Anyway,thanks for your replies.I have a doubt.Actually,i want the footer of the page comes down as it was in the index page.For this i am trying.But couldn't get any solution now.Ok.If u get any answers,pls reply me.

                       

                       

                      Thank you.

                      • 8. Re: Problem in responive photo gallery
                        sudarshan.t MVP

                        as it was in the index page.

                        That's what I'm talking about. We don't have a URL reference to see all pages at once. We have to dig deep down into your other posts and check 'screenshots' of your homepage now.

                         

                        In general, for more spacing, you could give margin-top to the div that holds the footer or margin-bottom to div that holds the content above footer.

                        • 9. Re: Problem in responive photo gallery
                          Roopavathy Community Member

                          Thank you.I have set the margin-bottom and it works.Thanks a lot.Since i am a new developer,i am getting lot of doubts.Thank you very much.

                          • 10. Re: Problem in responive photo gallery
                            Roopavathy Community Member

                            Thank u very much Sudharshan.I tried again by putting that div inside another div as u said.And it works well.Thanks a lot.But I have placed FG Div inside another FG Div.Will it create any problem.But it works well now.!