Ad

Dynamically Hide Photo Galleries That Have No Images

- 1 answer

I use the following script for my galleries:

<div class="photogallery">
  <div class="Spacer"></div>
  <div style="padding:10px 15px 0;">
    <div class="LuauPackages">
      <div class="GreenLrg" style=" display:inline-

block;vertical-align:top;">Gallery</div>
      <div class="arrow arrow-down"></div>
      <div class="arrow arrow-right"></div>
    </div>
    <div class="LuauPackCont">
      <asp:Literal id="litPhotos" Runat="server"></asp:Literal>
    </div>
  </div>
</div>

Scroll down the page where it says "Gallery" https://www.hawaiidiscount.com/oahu/luaus/hilton-waikiki-starlight.htm

Since this is a dynamically generated script it appears on all pages including the ones that don't have galleries such as - https://www.hawaiidiscount.com/activities/oahu/surfing/north-shore-tour.htm

My question is how can I dynamically set .photogallery {display: none} for all pages that don't have galleries?

One common thing that all pages with galleries have is the class name of each photo - bottomphotos, so is it possible to write a script that says if you don't find class called bottomphotos on the page, make .photogallery {display: none}

Ad

Answer

I believe this is roughly what you want:

$(function() {
  // Handler for .ready() called.
  if($('.bottomphotos').length === 0) { // if you cannot find any elements with class name of bottomphotos
    $('.photogallery').hide(); // then hide the photogallery element
  }
});

Hope this helps!

Ad
source: stackoverflow.com
Ad