We Keep Coding

Confused with JavaScript/HTML shadowbox for photos

I am new to web design/coding and am working on a personal website. I'm trying to create a shadowbox in JavaScript... I copied code from shadowbox-js.com but am throwing up an error on line 8 in Dreamweaver. On top of that I'm confused on how to code the photos in on the HTML file. I have a thumbnail photo that I would like to be able to be clickable so you can enlarge it in a popup window. I created a enlarged version of the photo (named it differently than the thumbnail, will correct that later) but am confused on how to code them into the HTML file. Any help is greatly appreciated!
Here is a codepen of the files:
https://codepen.io/AJ2021/pen/pQzmOR#=
Line 100 of the CSS is in a new file called shadowbox.css.
The line in the HTML I'm confused with is:
<section>
<font face="Lucida Bright">
<center><h1 id="pagename">Gallery</h1></center>
<div id="gallery">
<!-- Here are the gallery thumbnails -->
<a href="_images/php_family_marina.png"
rel="shadowbox[picture]" title="My family at Sunbury Marina"
<img src="tmb_Lawton_Family.png">
</div>
</section>

you missing > and </a> for <a> tag and call it with shadowbox() not Shadowbox.init()
shadowbox();
#gallery img {padding: 10px; margin: 5px;background: green}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shadowbox-js#3.0.3/source/shadowbox.css">
<script src="https://cdn.jsdelivr.net/npm/shadowbox-js#3.0.3/source/shadowbox.min.js"></script>
<div id="gallery">
<a href="https://i.postimg.cc/Kjn5GpVF/full-a.jpg" rel="shadowbox[picture]" title="a">
<img src="https://i.postimg.cc/mZMjyhrq/thumb-a.jpg">
</a>
<a href="https://i.postimg.cc/PrQM0cYQ/full-b.jpg" rel="shadowbox[picture]" title="b">
<img src="https://i.postimg.cc/4Ng5LZ73/thumb-b.jpg">
</a>
</div>

Lightgallery multiple instances not working

I got a couple of images that I want to open a gallery with (using lightgallery). So I looked up their documentation, and found out to use multiple instances I have to include lg-hash.js and give ids to the different galleries. That is exactly what I did but the second image is not working. It opens the lightbox but the loader just keeps spinning endlessly.
My code:
<div id="hash">
<a href="'.$fbimage.'">
<img style="max-width:250px;" src="'.$fbimage.'">
</a>
</div>
<div id="hash1">
<a href="'.$block_image->{'image_intro'}.'">
<img style="max-width:100%;" src="'.$block_image->{'image_intro'}.'">
</a>
<div>
And the js part:
<script type="text/javascript">
$(document).ready(function() {
$("#hash").lightGallery({
hash: true,
galleryId: 1
});
$('#hash1').lightGallery({
hash: true,
galleryId: 2
});
});
</script>
The first one is working as it should, but the second image is not loading, and I can't close the lightgallery on the second one.
What is going wrong? Here is a link to their documentation

AJAX Blocks Image Slider from Working

I am working a menu bar on a webpage. the menubar is based on an image library called Jcoverflip(<=You will find a demo here). The Image Slider works perfectly. That is until I start trying loading in content from different HTML's using AJAX technique.
When I flip a logo displayed in the top of the above image. Then it indeed does load the content from the other HTML's AJAX style. However the Jcoverflip slider does not work anymore.
Main.html
<div id="mycontainer">
<div id=w rapper>
<ul id="flip">
<li>
<img href="home" src="Logo.png" />
</li>
<li>
<img href="product" src="Product.png" />
</li>
</ul>
</div>
</div>
<div id="content"></div>
product.html
<img id="contact1" src="Contact.png">
MainMenu.js
jQuery( document ).ready( function(){
$("#content").load("home.html");
$("ul#flip li img").click(function(){
var page = $(this).attr("href");
$("#content").load(page + ".html");
return false;
});
});
when you click the product logo in the slider then the img of prouct.html will indeed load as intended but the slider does not slide to the product logo. the slider is now frozen.
here is a fiddle for more code. https://jsfiddle.net/qvgadgv4/
the fiddle doesn't work since you need Jcoverflip.
Is there anyone who can help me understand why using AJAX blocks my image slider from working? And come up with a solution to make it work with AJAX.

Well i still don't know why this Ajax method blocks my slider from working but I by chance found a solution.
You should ID your img instead of href.
<div id="mycontainer">
<div id= wrapper>
<ul id="flip">
<li><img id="home" src="Logo.png" /></li>
<li><img id="product" src="Product.png" /></li>
</ul>
</div>
Then load the content like this instead
$("#home, #product, #submit2").click(function(){
if(this.id == "home"){
$("#content").load("home.html");
}
if(this.id == "product"){
$("#content").load("product.html");
}
});
This will load the content into the div of the main html and the slider will work at the same time.

Fancybox.. one image that contains more images

I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?
Atm my fancy box is just one image showing one image..
Any help would be great, thanks

I use to work with Fancybox since earlier versions. What I do in that case is:
HTML:
<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>
<!-- this is the rest of the gallery... hidden -->
<div class="fancyboxHidden">
<a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
<img src="otherIMG-1.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
<img src="otherIMG-2.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
<img src="otherIMG-3.jpg" alt="">
</a>
<div>
CSS:
.fancyboxHidden {display:none;}
This way you are:
1) Using your full gallery (try the thumbs helper and will look great)
2) Indexing all the images for search engines
Hope this will help you, for a good example of this check out this site in source view.
PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)

Jumpy Tweet Button & Like Button - hide until full load?

http://screencast.com/t/qDxr1p7bFp
Social buttons jump around until full load.
This movie clip shows the jumpy behavior of the social buttons as they load. This happens on Chrome, Firefox and IE, latest builds. Using Twitter bootstrap css via bootstrap-sass gem.
Is there anyway to hide them until they finish loading?
<div class="social-bar">
<div class="container">
<ul class="social-buttons">
<li class="fb-button">
<fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
</li>
<li class="tw-button">
Tweet
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_GB/all.js#xfbml=1"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Try to hide them in CSS, (.social-buttons { opacity: 0; }), and add this:
$(document).load(function() {
$(".social-buttons").css("opacity", "1");
});
It will wait untill all elements will load and display the social buttons again. You may also try fiddling with display: none; in CSS and show() in jQuery, though the second way may cause your page layout to change after executing the function.