Список меню Выпуск

У меня есть класс = "selected", правильно работающий в том, что элемент выделен.Список меню Выпуск

Моя проблема заключается в том, что у меня есть список, в котором мне нужно сначала выбрать пункт меню «selected», что означает, что элемент меню с классом = «выбран» показывает только его содержимое при загрузке веб-сайта. Каждый пункт меню загружает серию изображений и видео. При нажатии на каждое меню отображаются только изображения или видео. Замечательно.

Что происходит сейчас, все элементы в каждом списке загружаются и отображаются при первом посещении веб-сайта. Я должен выбрать другой пункт меню, они нажимают на мой пункт меню «Избранное» только для тех пунктов меню, которые будут показаны.

Как я могу перейти на свой сайт и только иметь пункт меню «selected», загрузить его содержимое автоматически и не загружать содержимое всех других элементов меню.

Любая помощь была бы принята с благодарностью.

мой тестовый сайт здесь http://shoptest.divinedreamstore.com/klc/

<!-- Portfolio Projects --> 
    <div class="row"> 
    <div class="span3"> 
    <!-- Filter --> 
    <nav id="options" class="work-nav"> 
    <ul id="filters" class="option-set" data-option-key="filter"> 
    <li class="type-work">Type of Work</li> 
    <!--<li><a href="#filter" data-option-value="*"class="selected">All Projects</a></li>--> 
    <li><a href="#filter" data-option value=".video" class="selected">Video</a></li> 
    <li><a href="#filter" data-option-value=".commercials">Commercials</a></li> 
    <li><a href="#filter" data-option-value=".print">Print</a></li> 
    <li><a href="#filter" data-option-value=".radio">Radio</a></li> 
    </ul> 
       </nav> 
       <!-- End Filter --> 
      </div> 

      <div class="span9"> 
       <div class="row"> 
        <section id="projects"> 
         <ul id="thumbs"> 
          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 video"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Deland Train Depot" href="http://vimeo.com/45531383"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/delandtrain.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 video"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Sanford Fire Station" href="http://vimeo.com/50231345"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/sanfire.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 video"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Tavares Sea Planes" href="http://vimeo.com/59021648"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/seaplane.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 video"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Drive In Christian Church" href="http://vimeo.com/59022396"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/drivechurch.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 radio"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Radio Demo" href="http://vimeo.com/36597476"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/radiodemo.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 commercials"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Ultra 50" href="http://vimeo.com/66639113"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/ultra50.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 commercials"> 
           <!-- Fancybox Media - Gallery Enabled - Title - Link to Video --> 
           <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Press Conference" href="http://vimeo.com/46935409"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/mediacom1.jpg" alt="Video"> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 print"> 
           <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
           <a class="hover-wrap fancybox" data-fancybox-group="print" title="" href="_include/img/work/full/print1.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/print1t.jpg" alt=""> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 print"> 
           <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
           <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print2.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/print2t.jpg" alt=""> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 print"> 
           <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
           <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print3.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/print3t.jpg" alt=""> 
          </li> 
          <!-- End Item Project --> 

          <!-- Item Project and Filter Name --> 
          <li class="item-thumbs span3 print"> 
           <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
           <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print4.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
    </a> 
    <!-- Thumb Image and Description --> 
    <img src="_include/img/work/thumbs/print4t.jpg" alt=""> 
    </li> 
    <!-- End Item Project --> 

    <!-- Item Project and Filter Name --> 
    <li class="item-thumbs span3 print"> 
    <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print5.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/print5t.jpg" alt=""> 
          </li> 
          <!-- End Item Project --> 

    <!-- Item Project and Filter Name --> 
    <li class="item-thumbs span3 print"> 
    <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="" href="_include/img/work/full/print6.png"> 
            <span class="overlay-img"></span> 
            <span class="overlay-img-thumb font-icon-plus"></span> 
           </a> 
           <!-- Thumb Image and Description --> 
           <img src="_include/img/work/thumbs/print6t.jpg" alt=""> 
          </li> 
          <!-- End Item Project --> 
         </ul> 
        </section> 

       </div> 
      </div> 
     </div> 
     <!-- End Portfolio Projects --> 
    </div> 
    </div> 
    <!-- End Our Work Section --> 
    </div> 
    </div> 
    <!-- End Our Work Section -->

И это CSS

.type-work { 
color: #FFFFFF; 
font-size: 24px; 
font-weight: 300; 
margin-bottom: 30px; 
line-height: 1em; 
text-transform: uppercase; 
} 

.work-nav #filters { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

.work-nav #filters li { 
margin: 0 0 30px 0; 
padding: 0; 
} 

.work-nav #filters li a { 
color: #7F8289; 
font-size: 16px; 
display: block; 
} 

.work-nav #filters li a:hover { 
color: #FFFFFF; 
} 

.work-nav #filters li a.selected { 
color: #1BA8FF; 
} 

#thumbs { 
margin: 0; 
padding: 0; 
} 

#thumbs li { 
list-style-type: none; 
} 

.item-thumbs { 
position: relative; 
overflow: hidden; 
margin-bottom: 30px; 
cursor: pointer; 
} 

.item-thumbs a + img { 
width: 99.5%; 
} 

.item-thumbs .hover-wrap { 
position: absolute; 
display: block; 
width: 100%; 
height: 100%; 


opacity: 0; 
filter: alpha(opacity=0); 

-webkit-transition: all 450ms ease-out 0s; 
    -moz-transition: all 450ms ease-out 0s; 
    -o-transition: all 450ms ease-out 0s; 
     transition: all 450ms ease-out 0s; 

-webkit-transform: rotateY(180deg) scale(0.5,0.5); 
    -moz-transform: rotateY(180deg) scale(0.5,0.5); 
    -ms-transform: rotateY(180deg) scale(0.5,0.5); 
    -o-transform: rotateY(180deg) scale(0.5,0.5); 
     transform: rotateY(180deg) scale(0.5,0.5); 
} 

.item-thumbs:hover .hover-wrap, 
.item-thumbs.active .hover-wrap { 
opacity: 1; 
filter: alpha(opacity=100); 

-webkit-transform: rotateY(0deg) scale(1,1); 
    -moz-transform: rotateY(0deg) scale(1,1); 
    -ms-transform: rotateY(0deg) scale(1,1); 
    -o-transform: rotateY(0deg) scale(1,1); 
     transform: rotateY(0deg) scale(1,1); 
} 

.item-thumbs .hover-wrap .overlay-img { 
position: absolute; 
width: 100%; 
height: 100%; 
background: #1BA8FF; 

opacity: 0.80; 
filter: alpha(opacity=80); 
} 

.item-thumbs .hover-wrap .overlay-img-thumb { 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -16px 0 0 -16px; 
color: #FFFFFF; 
font-size: 32px; 
line-height: 1em; 

opacity: 1; 
filter: alpha(opacity=100); 
}

источник

2014-02-20 Imnotchuck Norris

Я обновил свой ответ. Взгляните, я думаю, это может быть вашим решением. – Sebsemillia

Вы можете попробовать:

.type-work a:not(.selected) { 
    display: none; 
}

Но это не помешало бы загрузку элементов, о которых идет речь, он просто не отображает их.

EDIT:

После того, как более близкий взгляд на ваш сайт в вопросе, и я увидел, что вы используете сценарий Изотоп, я рекомендовал бы изменить свой Javascript вместо.

Попробуйте добавить filter: '.selected' к вашему изотопному вызову, например:

$container.isotope({ 
      // options 
      animationEngine: 'best-available', 
      itemSelector : '.item-thumbs', 
      layoutMode : 'fitRows', 
      filter: '.selected' 
     });

источник

2014-02-20 22:21:34 Sebsemillia

Спасибо, я использовал то, что вы мне дали, и сначала сделал выбранный не показывать на загрузке, который был прогрессом, и, посмотрев на него, я изменил фильтр: «.selected», чтобы фильтровать: «.video», который был первым пунктом меню и это сработало. –

Список меню Выпуск

ответ

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