Skip navigation
Currently Being Moderated

Problem in responive photo gallery

Mar 20, 2013 11:22 AM

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.

 
Replies
  • Currently Being Moderated
    Mar 20, 2013 1:29 PM   in reply to Roopavathy

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 20, 2013 9:57 PM   in reply to Roopavathy

    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-->

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 20, 2013 11:04 PM   in reply to Roopavathy

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 20, 2013 11:17 PM   in reply to Roopavathy

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points