1. дома
  2. Вопрос и ответ
  3. Flexslider caption horizontal collapse

Flexslider caption horizontal collapse

2014-12-24 3 views
1

Я экспериментировал с этим часами, но не могу понять. Я хотел бы добавить функцию горизонтального коллапса к подписям flexslider над каждым слайдом в моей галерее flexslider.Flexslider caption horizontal collapse

Мне нужна подпись, чтобы начать свертывание, с небольшой информацией «i» в правом верхнем углу слайд-изображения (см. Пример изображения 1).

Когда нажата кнопка «i», надпись будет отображать анимацию с правой стороны, чтобы покрыть 1/3 ширины изображения и отобразить текст для этого изображения. Информация «i» будет заменена значком «X», который приведет к краху заголовка при щелчке (см. Пример изображения 2) и вернитесь к «i», как только заголовок вернется в состояние с ручным состоянием. См. Ссылку на сайт, HTML и CSS ниже. Любая помощь или совет оцениваются!

Сайт Пример: http://parkerrichard.com/studiogreen/html/project-01.html

Пример 1 (заголовок разрушилась): example 1 (caption collapsed)

Пример 2 (заголовок открыт): example 2 (caption open)

HTML 

<title>Studio Green</title> 

<!-- Bootstrap core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- Bootstrap custom CSS --> 
<link href="css/custom-small-gallery.css" rel="stylesheet"> 

<!-- Typekit custom fonts --> 
<script src="//use.typekit.net/bcn3ife.js"></script> 
<script>try{Typekit.load();}catch(e){}</script> 

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

<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
<![endif]--> 
<script src="js/respond.min.js"></script> 

<!-- custom icons --> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
<link href="fonts/flexslider-icon.eot"> 

</head> 

<body> 
<!-- row 1: static navbar --> 
<nav class="navbar navbar-default navbar-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    <a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a> 
    </div><!-- navbar toggle --> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="process.html">PROCESS</a></li> 
     <li><a href="office.html">OFFICE</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
     </ul> 
    </div><!--/nav-collapse --> 
    </div><!-- container --> 
</nav><!-- navbar --> 

<!-- row 2: body --> 
<div class="container"> 
    <div class="row centered"> 

     <!-- sidebar --> 
      <aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4" id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingOne"> 
       <h4 class="panel-title"> 
       <li class="active"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         RESIDENTIAL 
       </li> 
       </a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
       <ul> 
        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li> 
        <li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">2</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">3</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">4</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">5</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">6</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">7</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">8</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">9</span></a></li> 
        <li><a href="project-01.html">PROJECT <span class="spaced">10</span></a></li> 
       </ul> 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingThree"> 
       <h4 class="panel-title"> 
       <a href="schools.html"> 
        SCHOOLS 
       </a> 
       </h4> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingThree"> 
       <h4 class="panel-title"> 
       <a href="parks.html"> 
        PARKS 
       </a> 
       </h4> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingThree"> 
       <h4 class="panel-title"> 
       <a href="hospitality.html"> 
        HOSPITALITY 
       </a> 
       </h4> 
      </div> 
      </div>    <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingFive"> 
       <h4 class="panel-title"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
        ELEMENTS 
       </a> 
       </h4> 
      </div> 
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
       <div class="panel-body"> 
       <ul> 
        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li> 
        <li><a href="plants.html">ENTRY</a></li> 
        <li><a href="plants.html">FENCES</a></li> 
        <li><a href="plants.html">FIRE</a></li> 
        <li><a href="plants.html">LIGHTING</span></a></li> 
        <li><a href="plants.html">PAVING</a></li> 
        <li class="active"><a href="plants.html">PLANTS</a></li> 
        <li><a href="plants.html">POOLS</a></li> 
        <li><a href="plants.html">SEATING</a></li> 
        <li><a href="plants.html">SCULPTURE</a></li> 
        <li><a href="plants.html">STAIRS</a></li> 
        <li><a href="plants.html">SUSTAINABILITY</a></li> 
        <li><a href="plants.html">WATER</a></li> 
       </ul> 
       </div> 
      </div> 
      </div> 
     </aside> 

     <!-- slideshow gallery -->   
     <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 col-xs-12"> 
      <div class="flexslider"> 
       <ul class="slides"> 
       <li> 
        <img src="img/project-1_01.jpg" /> 
       </li> 
       <li> 
        <img src="img/project-1_02.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p> 
       </li> 
       <li> 
        <img src="img/project-1_03.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p> 
       </li> 
       <li> 
        <img src="img/project-1_04.jpg" /> 
       </li> 
       <li> 
        <img src="img/project-1_05.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p> 
       </li> 
       <li> 
        <img src="img/project-1_06.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p> 
       </li> 
       <li> 
        <img src="img/project-1_07.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p> 
       </li> 
       <li> 
        <img src="img/project-1_08.jpg" /> 
       </li> 
       </ul> 
      </div> 
     </div> 
     <!-- address --> 
     <address>232 SIR FRANCIS DRAKE BLVD</br> 
     SAN ANSELMO, CA 94960</br> 
     415 721 0905</address> 
    </div><!--/row --> 
</div><!--/container --> 


<!-- javaspcript --> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.flexslider.js"></script> 
<script> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "fade" 
     }); 
    }); 
</script> 

</body> 
</html>

CSS

/* this is a custom css stylesheet */ 


/* ========================================================================== 
    Base Styles, Bootstrap Modifications & Fonts Import 
    ========================================================================== */ 

/* 
* A better looking default horizontal rule 
*/ 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
} 

.centered { 
    text-align: center; 
} 

.container { 
    width: 100%; 
} 

.img-centered { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.mt-lg { 
    margin-top: 100px; 
} 

.mt { 
    margin-top: 80px; 
} 

.mb { 
    margin-bottom: 80px; 
} 

.drop { 
    margin-bottom: -15px; 
} 

.spaced { 
    margin-left: 37px; 
} 

.sm-spaced { 
    margin-left: 5px; 
} 


/* ========================================================================== 
    General styles 
    ========================================================================== */ 

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
} 

body { 
    font-family: "proxima-nova", sans-serif; 
    font-weight: 500; 
    font-size: 12px; 
    letter-spacing: 1px; 
    color: #555; 

    -webkit-font-smoothing: antialiased; 
    -webkit-overflow-scrolling: touch; 
} 

a { 
    color: #555; 
    outline: 0; 
} 

.strong { 
    font-weight: bold; 
    font-size: 13px; 
} 

small { 
    color: #555; 
} 

aside { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

address { 
    text-align: left; 
    line-height: 23px; 
    letter-spacing: 2px; 
    float: right; 
    padding: 90px 0px 30px 15px; 
    margin-right: 70px; 
} 

.email { 
    color: #6CAA3D; 
    font-weight: 400; 
} 

.info-box { 
    float: right; 
    text-align: left; 
    line-height: 17px; 
    font-weight: 400; 
    letter-spacing: 2px; 
    width: 315px; 
    height: 450px; 
    padding: 60px 20px 0 15px; 
} 

.info-box p { 
    padding-top: 12px; 
} 

.info-box h5 { 
    padding-bottom: 8px; 
    font-size: 17px; 
    font-weight: 700; 
} 

.contact { 
    height: auto!important; 
    margin-right: 5px; 
    width: 315px; 
} 

.team-box img { 
    border: 1px solid black; 
    margin-bottom: 30px; 
} 

/* ========================================================================== 
    Navigation styles 
    ========================================================================== */ 

/* 
* Top nav section 
*/ 

.navbar-header { 
    padding-bottom: 50px; 
} 

.navbar-brand { 
    margin-left: 0px!important; 
} 

.navbar .nav { 
    text-align: right; 
    margin-top: 45px; 
} 

.navbar .nav > li { 
    float: none; 
    display: inline-block; 
    font-size: 14px; 
    letter-spacing: 2px; 
    font-weight: 600; 
} 

.navbar-default { 
    background-color: white; 
    border-bottom: 0px; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #555; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus { 
    color: #6CAA3D; 
    background-color: transparent; 
    text-decoration: none; 
    outline: 0; 
} 

.navbar-default .navbar-nav > li { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.navbar-collapse { 
    margin-top: -65px; 
    border-top: 0px; 
} 

.navbar-default .navbar-collapse { 
    padding-top: 10px; 
} 

.logo { 
    margin-top: 10px; 
    height: 100px; 
    width: 200px; 
} 

.navbar-right { 
    padding: 15px 20px 0 0; 
} 

/* 
* Left aside nav 
*/ 

.panel { 
    border: 0px; 
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0); 
    box-shadow: 0 0px 0px rgba(0,0,0,.0); 
    margin: 45px 0 0 100px; 
} 

.panel-title { 
    font-size: 14px; 
    letter-spacing: 2px; 
    font-weight: 600; 
    color: #555; 
    padding-top: 7px; 
    padding-bottom: 7px; 
    list-style: none; 
} 

.panel-title a { 
    text-decoration: none; 
} 

.panel-default > .panel-heading { 
    background-color: transparent; 
    border-color: transparent; 
} 

.panel-body { 
    margin-left: -25px; 
    margin-top: -22px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 

.panel-body ul { 
    list-style-type: none; 
} 

.panel-body ul li { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    letter-spacing: 1px; 
} 

.panel-group { 
    text-align: left; 
} 

.panel-group .panel-heading + .panel-collapse > .panel-body { 
    border-top:0px; 
} 

.nav-caret { 
    padding-left: 10px; 
    font-size: 8px; 
} 

/* 
* flexslider format 
*/ 

.flexslider{ 
    background:none!important; 
    border:none!important; 
    box-shadow:none!important; 
    margin:0px -15px 0px 0px!important; 
    overflow: hidden; 
} 

.flex-direction-nav a { 
    color: #999!important; 
} 

.flex-next { 
    padding-right: 40px!important; 
} 

.flex-control-nav { 
    text-align: right!important; 
    padding-right: 70px!important; 
} 

.flex-control-paging li a { 
    color: transparent!important; 
} 

.nodot .flex-control-paging li a { 
    display: none!important; 
} 

.flex-control-paging li a.flex-active { 
    background: #6CAA3D!important; 
} 

.right { 
    padding-top: 100%!important; 
    bottom: 0; 
    right: 0; 
    margin-bottom: 0px; 
} 

.top { 
    top: 0; 
    margin-top: 10px; 
} 

.btm { 
    bottom: 0; 
    margin-bottom: 10px; 
} 

.l { 
    left: 0; 
} 

.r { 
    right: 0; 
} 

.w { 
    width: 100%!important; 
    left: 10px; 
    padding-right: 30px!important; 
} 

.flex-caption { 
    position: absolute; 
    text-align: left; 
    background:rgba(255, 255, 255, 0.7); 
    z-index: 1; 
    padding: 20px; 
    font-size: 11px; 
    width: 300px; 
} 

.flex-caption p { 
    padding-top: 12px; 
} 

.carousel .slides > li { 
    padding-right: 10px; 
}

источник

2014-12-24 Parker Richard

+0

Вы можете включить свой HTML, изображения, CSS в JS ведро. –

+0

Первый раз, используя JS bin, но я думаю, что он работает достаточно хорошо: http://jsbin.com/fixowetoba/1/edit?html,css,output –

ответ

1

Сначала я должен был перенастроить формат HTML моих слайдов, чтобы поместить заголовок в своей собственной DIV с идентификатором "тумблер":

    <ul class="slides"> 
        <li> 
         <img src="img/schools/img-01.jpg" /> 
         <div id="toggle" class="flex-caption right"> 
          <div class="caption-content"> 
           <span class="hcaption">MARIN ACADEMY</span><br /> 
           <br /> 
           Location: <span class="lite"></span><br /> 
           Architect: <span class="lite"></span><br /> 
           <br /> 
           <p>Taectur sinti consed magnimp oreptatem que est essi cuptus doluptate pratis rero omni con fugitatius venienimus.Xim fuga. Iliqui omnim comnimus estiorrum cum et accus et liquia nos.</p> 
          </div> 
         </div> 
        </li> 
       </ul>

, то я добавил функцию слайда jQuery:

<script> 
     $(document).click(function() { 
     $("#toggle").toggle("slide"); 
    }); 
</script>

Это сделало трюк! Вот рабочая версия заголовка скрыть/показать по щелчку:

http://parkerrichard.com/studiogreen/html/schools-caption-test.html

источник

2015-01-08 23:14:25

 Смежные вопросы

  • Нет связанных вопросов^_^