Develop Reference

How can I add custom next/previous buttons to fsLightbox?

I'm using a lightbox plugin called fsLightbox (https://fslightbox.com). I need to add custom next/previous buttons but I don't understand how. I don't see any information in the documentation. Can someone point me in the right direction please?
Update:
This plugin has built-in next previous buttons that appear on either side of the lightbox. I want to add additional next/previous buttons within the lightbox with custom text (the name of the next or previous slide). To accomplish this I'm using a custom source:
<a data-fslightbox="partners" data-class="partner" href="#FirstPartner">
<img src="FirstPartner.jpg" />
</a>
<a data-fslightbox="partners" data-class="partner" href="#SecondPartner">
<img src="SecondPartner.jpg" />
</a>
<div class="display-none">
<div id="FirstPartner">
<div class="copy-container">
Some copy
</div>
<div class="navigation-container">
<button onclick="NextSlide()">
Second Partner >>
</button>
</div>
</div>
<div id="SecondPartner">
<div class="copy-container">
Some copy
</div>
<div class="navigation-container">
<button onclick="PrevSlide()">
<< First Partner
</button>
</div>
</div>
</div>

Since the library does not seem to allow custom buttons there always exists is a css solution.
First we need to hide the svg arrows by setting display: none.
.fslightbox-slide-btn svg {
display: none;
}
After that the content is being replaced by My text.
.fslightbox-slide-btn:after {
content: 'My text';
color: white;
}
This is what it looks like:
Live Demo

Jquery & secton is not hiding my logo div id

I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.
I have tried both style="" inside the div and jquery. None of which works.
My HTML structure:
<!-- HEADER -->
<header id="header" class="header-left">
<div class="header-inner clearfix">
<!-- LOGO -->
<div id="logo" class="logo-left">
<a href="index.html">
<img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark#2x.png 2x" alt="Logo Dark">
<img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light#2x.png 1x, files/uploads/logo_light#2x.png 2x" alt="Logo Light">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="menu" class="clearfix">
<div class="menu-actions">
<div class="menu-toggle"><span class="hamburger"></span></div>
</div> <!-- END .menu-actions -->
<div id="menu-inner">
<nav id="main-nav">
<ul>
<li>xxx
</li>
<li>xxx
<ul class="sub-menu">
<li>xxx</li>
<li>xxxx</li>
<li>xxx</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<span class="pseudo-close header-close"></span>
</header>
Ok so before I show the source, here is what works:
<style>#logo img{opacity:0;visibility:hidden;}</style>
Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work. Example:
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
I then tried jQuery to hide the logo as a test. This did not work at all. Example:
<script src="files/js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#logo").css({
display: "none",
visibility: "hidden"
});
$("#logo").hide();
</script>
What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?

style="#logo img{opacity:0;visibility:hidden;}"
This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.
When setting an element's style attribute, you only need to write the style properties. This is how it should look:
style="opacity:0;visibility:hidden;"
Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.
A few notes:
Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
You can just write $('#logo').hide();, no need to the whole $("#logo").css({ section.
You can shorthand $(document).ready(function(){ to just $(function() {
Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;

You can't write inline style to another element.Inline styles are applicable to the element itself.
This is the right way
<style>#logo img{opacity:0;visibility:hidden;}</style>
This is not possible
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
Try
section #logo img{opacity:0;visibility:hidden;}

Google Tag Manager is hiding my custom HTML tag with css

I have added a custom HTML tag which is being triggered by a dataLayer variable. Everything is showing up on the page but for some reason my entire custom html tag code is wrapped in a div that hides everything:
<div style="display: none; visibility: hidden;">
<div id="newsletter" class="animated animatedvisible rubberBand">
<h3>Dynamic Drive Newsletter</h3>
<p>Sign up for our FREE newsletter to get early access to new scripts!</p>
<form action="" method="post">
<input type="email" value="" name="EMAIL">
<input type="submit" value="Subscribe">
</form>
<span class="scrollboxclose" onclick="scrollbox1.hide()">x</span>
</div>
<div id="specialoffer" class="animated">
<b>DDWhois</b> Free Domain Whois and Research Tool. Always free, always anonymous. <button onclick="location='http://ddwhois.com'">Visit</button>
<span class="scrollboxclose" onclick="scrollbox2.hide()">x</span>
</div>
<script>var scrollbox1=new scrollBox({elementid:"newsletter",dir:"down"}),scrollbox2=new scrollBox({elementid:"specialoffer",dir:"up",fxclass:"slideInDown",pctboundary:50});</script></div>
<div style="display: none; visibility: hidden;"> is not part of the code I added to my tag.
There is a JS script that makes the custom html code work but I didn't see anything in it that would insert the extra div

I fixed this by turning off the option: "Support document.write" on the Custom HTML tag configuration.

Disable section of HTML code when Javascript Disabled

I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>

Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');

replaceWith(); JQuery function

I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!

You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two

try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});