<html id="ntc-web-my" lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"
class="js">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://failover.northtyneside.gov.uk/sites/default/files/favicon_0.ico" type="image/vnd.microsoft.icon">
<meta name="generator" content="Drupal 7 (https://www.drupal.org)">
<link rel="canonical" href="https://failover.northtyneside.gov.uk/facility/938">
<link rel="shortlink" href="https://failover.northtyneside.gov.uk/node/938">
<title>Waves | North Tyneside Council</title>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_y5V-74fl2u3TPnO7Vzl0srF2_LEAmcANj4_-6qPJyxk.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_6wBOCOFxVtHYT2hpGMbeDQ312q-jxDxgASHWdm3WYi4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_gwWRemXWt3xYLQ0FjqVRBTD7b5PQL91v8BAu8J2qKjk.css" media="all">
<style>
#backtotop {
left: 10px;
}
</style>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_-U-YIgj5NQz73QbwdRP7JBqbYW5aUP8ZJhZOII6t4oY.css" media="all">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all">
<!--[if lt IE 10]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/overrides.min.css">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/legacy-overrides.min.css">
<header id="navbar" role="banner" class="navbar navbar-static-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="logo navbar-btn pull-left" href="/">
<img src="https://failover.northtyneside.gov.uk/sites/default/files/crest_2.png" alt="Council crest - go to home page">
<span class="hidden">Home page<span></span></span>
</a>
<a class="name navbar-brand" href="/">North Tyneside Council</a>
<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>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<nav role="navigation">
<ul class="menu nav navbar-nav">
<li class="first leaf active"><a href="/category/75/residents">Residents</a></li>
<li class="leaf"><a href="/category/188/business">Business</a></li>
<li class="leaf"><a href="/category/181/council">Council</a></li>
<li class="last leaf"><a href="/home">My North Tyneside</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="ntc-web-top-bar full_width_topbar">
<div class="container">
<div class="region region-full-width">
<section class="block clearfix">
<form id="search-block-form" action="/results" method="get" accept-charset="UTF-8">
<div class="input-group">
<div class="form-item form-item-query form-type-textfield form-group">
<label id="ntc-web-search-input-label" for="ntc-web-search-input" class="control-label element-invisible">Search the North Tyneside Council website</label>
<input id="ntc-web-search-input" aria-labelledby="ntc-web-search-input-label" placeholder="Search the North Tyneside Council website" class="form-control form-text ui-autocomplete-input form-autocomplete ui-autocomplete-processed" type="text" name="terms"
value="" size="15" maxlength="128" autocomplete="off" data-sa-theme="minimal"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" data-sa-theme="minimal" style="display: none;"></ul>
</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Search</button>
</span>
</div>
</form>
</section>
</div>
</div>
</div>
<div class="banner">
<div class="container">
</div>
</div>
<div id="ntc-web-main" class="main-container container" role="main">
<div class="row">
<section class="col-sm-12">
<h2 class="element-invisible">You are here</h2>
<span id="main-content" tabindex="-1"><span class="hidden">Main content</span></span>
<h1 class="page-header">
Waves</h1>
<div>
<section id="block-system-main" class="block block-system clearfix">
<div class="bootstrap-twocol-stacked" id="web-drupal-content">
<div class="row">
</div>
<div class="row">
<div class="panel-panel left col-sm-8">
<div class="panel-pane pane-node-content in-full" id="web-drupal-content-main">
<div class="pane-content">
<div about="/facility/938" typeof="sioc:Item foaf:Document" class="node node-facility view-mode-full">
<div class="row">
<div class="col-sm-12 ">
<div id="node-facility-full-group-gallery" class="panel clearfix group-gallery field-group-div">
<h2><span>Gallery</span></h2>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-12.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-12.jpg" width="1025" height="683" alt="A view of the outside of Waves" title="Waves"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-14.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-14.jpg" width="1025" height="684" alt="People sliding down the slide" title="Pool slide"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/Waves3.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/Waves3.jpg" width="800" height="531" alt="A view of the pool" title="Swimming pool"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/0035%20waves%20MEC.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/0035%20waves%20MEC.jpg" width="800" height="531" alt="The Rock Hopper in the main pool" title="The Rock Hopper "></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-8.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-8.jpg" width="1025" height="683" alt="Cardio equipment in the gym" title="Contours gym"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-10.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-10.jpg" width="1025" height="683" alt="A man using a cardio machine" title="Contours gym"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-3.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-3.jpg" width="1025" height="683" alt="A view of the jacuzzi" title="Spa"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/0029%20waves%20MEC.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/0029%20waves%20MEC.jpg" width="4288" height="1592" alt="A view of the whole pool" title="Pool view"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_PROMO-6385_FULLSIZE.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_PROMO-6385_FULLSIZE.jpg" width="3960" height="2640" alt="A view of the soft play room" title="Soft play"></a>
</div>
</div>
<div id="node-facility-full-group-gallery" class="panel clearfix group-gallery field-group-div">
<h2><span>Gallery</span></h2>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-12.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-12.jpg" width="1025" height="683" alt="A view of the outside of Waves" title="Waves"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-14.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-14.jpg" width="1025" height="684" alt="People sliding down the slide" title="Pool slide"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/Waves3.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/Waves3.jpg" width="800" height="531" alt="A view of the pool" title="Swimming pool"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/0035%20waves%20MEC.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/0035%20waves%20MEC.jpg" width="800" height="531" alt="The Rock Hopper in the main pool" title="The Rock Hopper "></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-8.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-8.jpg" width="1025" height="683" alt="Cardio equipment in the gym" title="Contours gym"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-10.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-10.jpg" width="1025" height="683" alt="A man using a cardio machine" title="Contours gym"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-3.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-3.jpg" width="1025" height="683" alt="A view of the jacuzzi" title="Spa"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/0029%20waves%20MEC.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/0029%20waves%20MEC.jpg" width="4288" height="1592" alt="A view of the whole pool" title="Pool view"></a>
</div>
<div class="field field-name-field-gallery field-type-image field-label-hidden">
<a href="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_PROMO-6385_FULLSIZE.jpg" rel="lightshow[field_gallery][]" class="lightbox-processed"><img typeof="foaf:Image" class="img-responsive" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_PROMO-6385_FULLSIZE.jpg" width="3960" height="2640" alt="A view of the soft play room" title="Soft play"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// add img in hidden state then fade
// copy title and alt attributes from small img to new one
jQuery(document).ready(function() {
//on img click
jQuery("#node-facility-full-group-gallery").append('<div id="appendLocation"></div>')
jQuery("#node-facility-full-group-gallery img").click(function(event) {
//prevent lighthouse default action
event.preventDefault();
//get img src
var imgToDisplay = jQuery(event.target).attr("src");
var imgToDisplayAlt = jQuery(event.target).attr("alt");
var imgToDisplayTitle = jQuery(event.target).attr("title");
//appended img
//construct html for image to be displayed
jQuery('<img id="appendedImg" src="' + imgToDisplay + '" alt="' + imgToDisplayAlt + '" title="' + imgToDisplayTitle + '">').load(function() {
jQuery('#node-facility-full-group-gallery #appendLocation').html(this).closest('.group-gallery .field-group-d').nextAll().fadeIn(150);
var imageTop = document.getElementById("appendLocation").offsetTop;
if (imageTop > 0) {
window.scrollTo({
top: imageTop - 40,
behavior: 'smooth'
});
}
});
});
});
</script>
<!-- Needed to activate display suite support on forms -->
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</section>
</div>
</section>
</div>
</div>
<footer>
<div class="container">
<section id="block-block-11" class="block block-block clearfix">
<p><a href="/category/308/contact-council">Contact us</a> <span aria-hidden="true">|</span> <a href="/news">News</a> <span aria-hidden="true">|</span> <a href="/category/375/council-jobs-and-careers">Jobs</a> <span aria-hidden="true">|</span>
<a
href="https://my.northtyneside.gov.uk/category/1001/data-protection">Data protection and privacy</a> <span aria-hidden="true">|</span> <a href="/category/774/cookie-policy">Cookie policy</a></p>
<p><a href="https://www.google.co.uk/maps/place/North+Tyneside+Council/@55.0180808,-1.5078834,14z/data=!4m8!1m2!2m1!1scobalt!3m4!1s0x0000000000000000:0x7529769ea17d10de!8m2!3d55.02273!4d-1.5095148">Quadrant, The Silverlink North, Cobalt Business Park, North Tyneside. NE27 0BY</a></p>
<p>© 2020 North Tyneside Council</p>
</section>
<section id="block-block-8" class="block block-block clearfix">
<ul>
<li>
<a href="https://www.youtube.com/channel/UCsah5TRJkRH6Ou7MSfgImsQ"><img alt="Youtube logo" class="first-social" src="/sites/all/themes/ntc_bootstrap/images/youtube-32.png">YouTube</a>
</li>
<li>
<a href="https://twitter.com/NTCouncilTeam"><img alt="Twitter logo" src="/sites/all/themes/ntc_bootstrap/images/twitter-32.png">Twitter</a>
</li>
<li>
<a href="https://www.facebook.com/pages/North-Tyneside-Council/340293492817315?ref=hl"><img alt="Facebook logo" src="/sites/all/themes/ntc_bootstrap/images/facebook-32.png">Facebook</a>
</li>
</ul>
</section>
</div>
</footer>
<script src="https://failover.northtyneside.gov.uk/sites/default/files/js/js_ZdKxSuA1fkezsVufHEcECTJtAPQUeXSaKnIW9V_kdiM.js"></script>
<script src="https://failover.northtyneside.gov.uk/sites/default/files/js/js_MRdvkC2u4oGsp5wVxBG1pGV5NrCPW3mssHxIn6G9tGE.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="/sites/default/files/js-overrides/overrides.js" defer=""></script>
<div id="backtotop" class="jquery-once-2-processed" style="display: block;">Back to top</div>
<div id="lightbox2-overlay" style="width: 1903px; z-index: 10090; height: 1796px; background-color: rgb(0, 0, 0); opacity: 0.8; display: none;" class="overlay_default"></div>
<div id="lightbox" style="z-index: 10500; top: 952.7px; left: 0px; display: none;" class="lightbox2-orig-layout">
<div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); width: 1045px; height: 703px;">
<div id="modalContainer" style="display: none; padding: 10px; width: 1025px; height: 683px;"></div>
<div id="frameContainer" style="display: none; padding: 10px;"></div>
<div id="imageContainer" style="padding: 10px; display: block;"><img id="lightboxImage" alt="A view of the outside of Waves" style="display: inline; width: 1025px; height: 683px; z-index: 10500;" src="https://failover.northtyneside.gov.uk/sites/default/files/WAVES_2017-12.jpg">
<div id="hoverNav" style="display: block; z-index: 10500;">
<a id="prevLink" title="Previous" href="#" style="padding-top: 10px; display: none; height: 683px; z-index: 10500;"></a>
<a id="nextLink" title="Next" href="#" style="padding-top: 10px; display: block; height: 683px; z-index: 10500;"></a>
</div>
</div>
<div id="loading" style="z-index: 10500; display: none;">
<a href="#" id="loadingLink"></a>
</div>
</div>
<div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); display: block; width: 1045px;">
<div id="imageData">
<div id="imageDetails"><span id="caption" style="z-index: 10500;"></span><span id="numberDisplay" style="display: block; z-index: 10500;">Image 1 of 9</span></div>
<div id="bottomNav">
<div id="frameHoverNav" style="display: none;">
<a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; display: none;"></a>
<a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; display: none;"></a>
</div>
<a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"></a>
<a id="bottomNavZoom" href="#" style="display: none;"></a>
<a id="bottomNavZoomOut" href="#" style="display: none;"></a>
<a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a>
<a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a>
</div>
</div>
</div>
</div>
</body>
</html>Hi, I have a function working to load in an image when clicked, however it only works if there is a single image gallery, when there may be instances of multiple image galleries.
Does anyone have any ideas on how to make it so the 2 galleries work independently from each-other ?(i.e when you click on image in one gallery it displays the image below the relevant gallery you clicked on, not overwrite the first galleries loaded image)
I was suggested to locate the matching class of the gallery that is closest to the 'click' but I don't know how you would do this. Thanks
Aucun commentaire:
Enregistrer un commentaire