1. 首页
  2. 问答
  3. Flexslider标题水平折叠

Flexslider标题水平折叠

2014-12-24 137 views
1

我已经试验了几个小时，但不能完全弄明白。我想为我的flexslider库中的每张幻灯片的flexslider标题添加水平折叠功能。Flexslider标题水平折叠

我需要标题开始折叠，在幻灯片图片右上角有一个小信息“我”按钮（请参阅示例图片1）。

当单击“i”按钮时，标题会将动画从右侧滑出以覆盖图像宽度的1/3并显示该图像的文本。信息“我”将被替换为一个“X”图标，该图标可以在点击时折叠字幕（请参阅示例图片2），并且当字幕返回到折叠状态时回到“我”。请参阅下面的网站链接，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标题为 “切换” 的ID：

    <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

相关问题

 相关问题