Newbie times 4: modifying a script, which may be opening a can of worms

Report · Dec 26, 2021

I'm making progress and getting a bit more familiar with the program, but now I'm coming up aginst a rather tricky issue which entails modifying some outside elements for use in Dreamweaver. The specific information that I'm looking for at the moment has to do with W3Schools little "how to" tutorial on hover tabs. If you have a better suggesion I'll listen to it.

Background: the old CS6 site which I want to port into the CC2021 version of Dreamweaver has a graphics collection. It's not that well built, I was in the process of learning Dreamweaver when I built it and would like to do it a bit better this time. (No, still not wanting to deal with Bootstrap until I am a good deal more familiar with Dw itself.)

Several pages in the collection have multiple images. I'd rather not make people have to scroll forever to see them all as is the case in the current site. The problem is that the images in the collection are not a uniform size. I've found that templates in Dw do not let you change the dimensions of things in child pages. so I need to use something in the template that will put the images in a container which can be set to 'auto'. I also need a solution which is not going to interfere with the dropdown menu and button rules which are already in the template.

The hover tab appears to be a possibility. I've saved a copy of my present template in a working folder and have copy/pasted the hover tab tutorial into it. It includes a script. I have no clue on how to modify a script in a manner in which will still work.

I have messed with it and the tabs will take graphics (I haven't tried some of the larger ones, or ones of different sizes yet) and it will switch the display by clicking on the buttons. But any attempt to rename anything but the visible button label breaks it, and I can't add any new ones. The example uses city names. I want numbers. And I want more than three of them. A half dozen at least.

Here is the code from the tutorial:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

What do I change to get plain numbered buttons, that I can add more of? As things stand it stops working if I change pretty much of anything.

Report · Dec 27, 2021

Try the below code, it's a slight improvement on the code you have provided. I can't help thinking though if you are showing graphics it might be better to show them in an overlay modal window gallery.

The below is activated by 'onclick' rather than 'onmouseover' as that will do nothing in mobile devices. If you're not bothered by mobile footfall then you can always change 'onclick' to 'onmouseover'.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical tab panel example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
}
/* Style the 'tabsContent' div */
.tabsContent {
display: flex;
width: 90%;
margin: 0 auto;
} 

/* Style the 'tabs' div */
.tabs {
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
}
/* Style the 'tabs' buttons */
.tabs button {
display: block;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}
/* Change background color of 'tab link' on hover */
.tabs button:hover {
background-color: #ddd;
}
/* Create an active/current tab link class */
.tabs button.active {
background-color: #ccc;
}
/* Style the 'content' div */
.content {
flex: 1;
border: 1px solid #ccc;
border-left: none;
}
/* Style the 'tabcontent' div */
.tabcontent {
padding: 0px 12px;
display: none;
opacity: 0;
transition: all 0.5s ease-in-out;
}
/* Set first 'tabcontent' div open as default */
.tabcontent.active {
display: block;
opacity: 1;
}
.fadeInPanel {
opacity: 1;
}
/* Mobile */
@media screen and (max-width: 768px) {
.tabsContent {
flex-direction: column;
} 
.tabs {
width: 100%;
}
.tabs button {
display: block;
padding: 10px 16px;
text-align: center;
}
.content {
border: 1px solid #ccc;
}	
}
</style>
</head>
<body>
	


<div class="tabsContent">
	
<div class="tabs">
<button class="tablinks active">Graphic 1</button>
<button class="tablinks">Graphic 2</button>
<button class="tablinks">Graphic 3</button>
<button class="tablinks">Graphic 4</button>
<button class="tablinks">Graphic 5</button>
<button class="tablinks">Graphic 6</button>
</div>
<!-- end tabs -->

<div class="content">
	
<div class="tabcontent active">
<h3>Graphic 1</h3>
<p>Graphic 1 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 2</h3>
<p>Graphic 2 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 3</h3>
<p>Graphic 3 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 4</h3>
<p>Graphic 4 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 5</h3>
<p>Graphic 5 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 6</h3>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
</div>
<!-- end tabcontent -->

</div>
<!-- end content -->

</div>
<!-- end tabContentWrapper -->



<script>
// Assign elements to variables
let tablinks = document.querySelectorAll('.tablinks');
let tabcontent = document.querySelectorAll('.tabcontent');

tablinks.forEach(function(tablink, index) {
// Add onclick event to each tab link
tablink.onclick = function() {
// Remove active class from all tab links	
tablinks.forEach(function(tablink) {
tablink.classList.remove('active');
});
// Set all tab content panels to display none, remove 'active and 'fadeInPanel' classes	
tabcontent.forEach(function(tabcontent) {
tabcontent.style.display = "none";
tabcontent.classList.remove('active' , 'fadeInPanel');
});
// Set current tab content panel to show and fade in
tabcontent[index].style.display = "block";
setTimeout(function() {
tabcontent[index].classList.add('fadeInPanel');	
}, 500)	
// Add active class to current tab link
this.classList.add('active');
};
});
</script>

</body>
</html>

Report · Dec 27, 2021

Thank you! I'll give that a go and let you know how it worked out.

Report · Dec 27, 2021

If you're interested, Fancybox 4 makes a full featured, responsive image viewer that provides a good experience for mobile device users. There is a nominal one time fee for commercial use.

https://fancyapps.com/docs/ui/fancybox/

Fancybox 4 screenshot

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 27, 2021

Well, it does work. It was a fight, since whenever I tried to format the appearance of the tabs or buttons, it broke. But I got it eventually. The underlying tab appears to need a fixed height to be visible. I would have liked it to be the height of the images, but since they all are different heights, that's unfeasible, since you can't change the dimensions of anything in a child page. But the button panel works on its own without the visible tab, and that will do. I'm assuming that the script can sit idle in the template when not needed, since only a fraction of the pages have multiple images which will need to be collected into the tab content containers and swapped back and forth.

I'll need to figure out a way to get it to share a page with text gracefully, since the text tries to wrap, and I'd rather it didn't. I would prefer to have the button panel at the top of the page than down below all of the text, since some of the pages have rather a lot of text in their curret iterations. But that's just a design issue that needs a better solution.

I'm a bit concerned, since I've had some issues copy/pasting things into different pages and having them not work, and I have been working on a copy of the template. But I suspect that if I can get it to work in the copy, I ought to be able to get it to work in the actual template eventually.

Thank you again for the help.

Report · Dec 27, 2021

The underlying tab appears to need a fixed height to be visible.

\

I don't follow what you mean 'underlying tabs' - nothing needs to be a fixed height. Infact you shouldn't use fixed height as the content determines the height - that original code you posted is poor as it sets a specific height and uses oudated workflows such as 'float', both which show coding ignorance, although giving the benefit of doubt the example was probably written 10 years ago.

I'm assuming that the script can sit idle in the template when not needed, since only a fraction of the pages have multiple images which will need to be collected into the tab content containers and swapped back and forth.

Just move the script to an external js file and link that js file to the pages which require the script. Why have redundant code in pages which do not require it.

I'll need to figure out a way to get it to share a page with text gracefully, since the text tries to wrap, and I'd rather it didn't.

Have no idea what you mean. Text in the panel doesn't wrap unless it needs to on account there are multiple lines of text.

I would prefer to have the button panel at the top of the page than down below all of the text, since some of the pages have rather a lot of text in their curret iterations. But that's just a design issue that needs a better solution.

Buttons are at the side, not down below, its a vertical tab example. Buttons can be positioned at the top but remember across the browser window you only have so much real estate to play with so the amount of buttons should be limited.

I'm a bit concerned, since I've had some issues copy/pasting things into different pages and having them not work, and I have been working on a copy of the template. But I suspect that if I can get it to work in the copy, I ought to be able to get it to work in the actual template eventually.

Well you need to be focused when producing a website and playing with code, theres absolutely zero tolerence for user error, it just wont work. That why experts are worth their weight in gold despite what most clients think. If you're not 100% focused every single time you open up your code editor then my advice is don't open it. Go do something simple like sticking cherries on top of cakes.

Report · Dec 27, 2021

I think we're talking two slightly different languages, so we're a bit at cross-purposes. My background is print graphics, so I'm talking about the appearance of the page as a whole, not the code that goes into it. And, yeah, I suspect the code I got off the W3Schools site probably is showing its age.

I'd have liked the appearance of the button container (the tab) to extend down the length of the displayed image so the buttons and the tabs would effectively serve as a left border for the image. But that isn't feasible, so I'll do without it.

And the text wrapping I was talking about was the page text wrapping around the displayed image Adding a small right margin to keep it from butting up against the image edge is probably as much improvement on that issue as I can hope for. It gives me a corresponding margin on the left edge of the image between it and the buttons, but that's a reasonable trade-off

Same with the business of the buttons at top or bottom. I'm talking about the buttons being above or below the rest of the text on the page, since the page will have both images. and text discussing the images.

Re-sizing some of the images so they're large enough to just push the text down below instead of having a few words stragling down the right edge is probably the only way to stomp out that particular brush fire.

Yes, moving the script to an external js file is what I need to do. That's not described in the Classroom in a Book (if it isn't in that book, I don't know about it). The site has a js folder, and there are three js files already in it, which I gather are automaticly generated when one creates a site. Am I correct in my suspicion that what I need to do is create a new file to hold this script and link the pages which will be using it to it?

How do I do that? I'm on a Mac, so my text editor is Apple's TextEdit program. That doesn't have an export function, and .js isn't one of its save as options. Nor is plain .txt any more. Do I save it as the default .rtf, or .odt and then manually change that to the .js extention? And is there a specific format needed, or do I just copy/paste into a new file, save it as the site name, and add .js ?

I'm assuming that the link goes at the top of the document.

The document I'm working in has what appeears to be such a link there which may be a default, or may have come in from the source document that I built things off of. I've ignored it so far, since removing such things often seem to break the whole page. It also seems to be referring to Internet Explaorer 9 which isn't something that I personally feel a need to be concerned with.

In any case, this is what it says:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

</head>

I'm also assuming that the same kind of process will be needed when I start building my external .css files? After having lost my entire start at building the site when Dreamwaver crashed and wiped out everything that was based off the .css file I was using, I've kept the pages isolated and built the rules in the internal <style> area, but I don't intend for that to be permanent. I'll end up with more than one .css file since the dmensions of the areas in the pages is different for the different collections, but I gather that one is not limited to only one .css file per site.

Report · Dec 27, 2021

Coming from Print Design myself, I speak from experience when I say that web design is NOTHING like print design. They are two different disciplines with different goals.

Print is about static & unchanging form over function.

The web is about function with ever-changing form. It requires a completely different mindset. Once you get all the functioning parts working, then you tackle the form (layout, style & typography) which is merely the icing on your cake.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 27, 2021

It seems to be bloody fragile. That's for sure. Sneeze and you break something.

Report · Dec 27, 2021

Well I too am from a graphic design/print background dating back to the 1970's, still participating in it up until recently, so 47 years if you include the 4 years I was at design college - I doubt you can teach me much about graphic/print design, that I don't already know.

It's a shock to the system when you first start getting into web development that much I can tell you, rip up and throw away almost everything you know about graphic design/print when it comes to web design/development, the two are so far apart, wider than the Grand Canyon.

I do hear your concern and agree with the way the website pages look and that's to be admired, you can achieve almost anything if you know how but you have to think about 200 steps beyond how you think when producing a static DTP page. I've encounterd many an ignorant graphic deisgner who sits and drags around a few boxes in InDesign/Quark and think thats a highly skilled process, its not, graphic design these days is kindergarten stuff compared to web development.

It's difficult to follow your response fully, a visual of what you are trying to achieve is usually helpful in these situations but it seems like you are still thinking in DTP mode where things are static, so you may be a bit frustrated initially until you embrace a new way of thinking.

No need for an Apple Text editor just create a new file in Dreamweaver and name it myFancyScript.js or whatever name you require so long as it has the .js extention. Then copy the script, minus the opening and closing <script></script> tags and paste it in the js file and save it. Link it to your page/s:

This usualy goes before the closing body tag so the html code loads before the script executes. You can also link it in the <head></head> section of your page if you use the 'defer' attribute

The script will then only load after the html.

Report · Dec 27, 2021

That's a big help. If I can get it to work and keep it working that'll be the next step. I'm assuming for the nesw .css files it will be the same without the <style></style> tags?

I had everything pretty much as I wanted it. I needed some additional buttons, and it fought me, but I finally got them in and working. The top button is going to be empty so people will first see the introductory text before they start clicking on things to see the images.

Then I saved, quit out of Dreamweaver, and went to read my email.

When I opened Dreamweaver again nothing worked. Could have clicked 'til the cows come home and no images would ever show.

No idea what broke. I didn't touch the script. Just formatted the appearnce of the buttons, and copy/pasted some new ones in. If there is a limit to how many buttons one can have it doesn't say.

And yeah, I definitely am still thinking like a print designer. The website is just so I can show off my publication projects. And as I said in one of my earlier question posts, at this point I don't care aboout what something does on mobile devices. If it works on a laptop, I'll be satisfied.

Once I get the site into code from a program that *isn't* going to die on me when I need to replace my computer, *then* I'll consider redesigning it to be more responsive. For right now, fixed width pages are just fine. I already know this version of the site is a stopgap. But it needs to be in software that isn't going to die on me.

Report · Dec 28, 2021

I'm assuming for the nesw .css files it will be the same without the <style></style> tags?

Yes, you are correct

When I opened Dreamweaver again nothing worked. Could have clicked 'til the cows come home and no images would ever show.

No idea what broke. I didn't touch the script. Just formatted the appearnce of the buttons, and copy/pasted some new ones in. If there is a limit to how many buttons one can have it doesn't say.

It happens, usually due to operator error or panic setting in, you start doing all kinds of things, making the situation worse. Even after what seems like centuries, I struggle to resolve simple issues. That's what web-development is - almost every minute of every day in the editor is a battle. My advice to anyone thinking about going into web-development, don't, you will regret it. Your health will eventually suffer and you will burn out, even more quickly these days given the myraid of options available. Its a silly game these days, not one that I would now get involved with, knowing all the facts.

Report · Dec 28, 2021

And this morning I open the same file and everything is working perfectly. Problems? What problems?

I want to thank you for all your help. But by this point I'm not sure I trust this bit of monkey tricks enough to put it in any page that I post publicly. Particularly given the rest of the flakey behaviour I'm getting from the program. This is not a stable program. Or at least not on my computer. I would very much rather not force any viewers to have to scroll forever to see all of the images in a given set, but at least I have reasonable confidence that any such images would at least show up.

And definitely thank you for the tips on exporting the .css and (maybe) .js files.

Report · Dec 28, 2021

Did you even look at Fancybox 4 as a possible solution????
https://fancyapps.com/docs/ui/fancybox/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 28, 2021

Yeah, but it was like coming in on the middle of a conversation. It's not really accessible at my level of ignorance.

Report · Dec 28, 2021

It's not really accessible at my level of ignorance.

===========

I'm not sure what is confounding you about Fancybox. It's EZPZ to deploy with just 2 scripts.

WORKING EXAMPLE:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fancybox 4 Demo</title>

<!--INSERT FANCYBOX CSS-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">

<!--OPTIONAL CLASSIC STYLES FOR FANCYBOX VIEWER-->
<style>
a[data-fancybox] img { cursor: zoom-in; }
.fancybox__container { --fancybox-bg: rgba(17, 6, 25, 0.85);
}
.fancybox__container .fancybox__content {
/* Create white border around the image */
box-sizing: content-box;
padding: 1rem;
background: #fff;
border-radius: 6px;
color: #374151;
box-shadow: 0 8px 23px rgb(0 0 0 / 50%);
}
.fancybox__caption { max-width: 80%;   /* Prevent opacity change when dragging up/down */
  --fancybox-opacity: 1;
}
</style>

<!--MINIMAL PAGE STYLES FOR DEMO PURPOSES-->
<style>
body {
background-color: papayawhip;
color: saddlebrown;
width: 90%;
margin: 0 auto;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
/**scalable font & line sizes**/
font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
.thumbnail {
width: 25%;
padding: 1rem;
border: 1px solid #BFBFBF;
border-radius: 6px;
background-color: white;
box-shadow: 10px 10px 5px #aaa;
}
</style>
</head>

<body>
<h2>Fancybox 4 Image Gallery</h2>
<p><em>NOTE: You need a license to use this commercially.</em>
<a href="https://fancyapps.com/pricing" title="Buy Fancybox">Fancybox Pricing</a>
</p>

<!--BEGIN FANCYBOX GALLERY-->
<div class="fancybox">
<p>
<a href="https://lipsum.app/id/1/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 1">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/1/342x261"></a> &nbsp;

<a href="https://lipsum.app/id/2/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 2">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/2/342x261"></a> &nbsp;

<a href="https://lipsum.app/id/3/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 3">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/3/342x261"></a> &nbsp;

<a href="https://lipsum.app/id/4/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 4">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/4/342x261"></a> &nbsp;

<a href="https://lipsum.app/id/5/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 5">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/5/342x261"></a> &nbsp;

<a href="https://lipsum.app/id/6/1024x768"
  data-fancybox="gallery"
  data-caption="Caption 6">
<img class="thumbnail" alt="placeholder" src="https://lipsum.app/id/6/342x261"></a>
</p>
</div><!--/end of fancybox-->

<hr>

<footer>
<small>© 2022 All rights reserved by XYZ Ltd.</small>
</footer>

<!--INSERT FANCYBOX JS HERE-->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 28, 2021

Well I can certainly save out another copy of the template and try it. Thank you!

Report · Dec 28, 2021

You're welcome.

Copy & paste entire code exactly as presented -- WITHOUT any other nonsense.

1. Go to File > Save and name it Fancybox-test.html.

2. Right-click the open document tab in DW > select Open in Browser to see it action.

3. Adjust your browser viewport by dragging the application frame handles to test it's responsiveness.

Fancybox has many options that are detailed at length in the online documentation. Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 28, 2021

Will do. I may not get onto it for a few days. I'd like to stomp out a couple of other brush files before settling down to deal with this.

Report · Dec 31, 2021

Well I got the other brushfires out and tried the fancybox demo in a saved out copy of the template. Thank you! It works!

It took a bit of experimenting to clear out the default page styles it comes with, incorporate the box's CSS into my already-styled page, and sort out the list order so I didn't keep losing my body styling. But it wasn't a prolonged fight. It even worked in Safari which is turning out to be asignificant issue.

It worked in the child page as well. That was the problem with the tabbed version that we've been fighting with. That had finally settled down to work perfectly in the template, but it wouldn't work in a child page, or even in a saved-as .html page from the template. I still need to see how well I can get my own images into it. But at least I know the actual process works.

I'd be a little leery about a solution which depends on a script on a site halfway around the workd, but I gather that if you pay for it they send you a copy of the script to put in your own local .js file. Right?

Report · Dec 31, 2021

I'd be a little leery about a solution which depends on a script on a site halfway around the workd, but I gather that if you pay for it they send you a copy of the script to put in your own local .js file. Right?

By @JoyceOdell

You've got the script linked to your page so its accessible if you want to copy it and keep it locally - however the producers are relying on your honesty, i.e. if you use it, pay them. I don't know their terms and conditions for usage, read them.

As for scripts being housed on remote servers you have no control over well it does happen that the script gets moved and your gallery breaks, its rare, but its happened before to a popular image gallery 'cycle2' I believe.

Report · Dec 31, 2021

As for scripts being housed on remote servers you have no control over well it does happen that the script gets moved and your gallery breaks, its rare, but its happened before to a popular image gallery 'cycle2' I believe.

By @osgood_

=============

Some users mistakenly referenced Cycle 2 from GitHub repository which was not an official CDN.

In truth, Cycle 2 still works when referenced from actual CDNs like these:

https://cdnjs.com/libraries/jquery.cycle2

https://www.jsdelivr.com/package/npm/jquery.cycle2

I regularly use assets on CDNs without any problem... well except for one time a few years ago when Amazon (AWS) went down and half the planet was offline -- including Adobe's services. But that was an extreme anomaly.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2021

As for scripts being housed on remote servers you have no control over well it does happen that the script gets moved and your gallery breaks, its rare, but its happened before to a popular image gallery 'cycle2' I believe.

By @osgood_
=============
Some users mistakenly referenced Cycle 2 from GitHub repository which was not an official CDN.

By @Nancy OShea

More than some users. I don't know why the link was accessible through Github to be honest, then Github changed the link adresss to something else or the script got hosted somewhere else on Github which ended up breaking the image gallery of anyone who used it.

It a rare situation but it does happen to small independent producers of plugins.

I don't really understand Github anyway to be honest, its not something that I get involved with apart from knowing its some lounge area to share, store and back-up code, which I've never had any requirement for.

Report · Dec 31, 2021

I'd be a little leery about a solution which depends on a script on a site halfway around the world, but I gather that if you pay for it they send you a copy of the script to put in your own local .js file. Right?

By @JoyceOdell

==========

Why you SHOULD use a Content Delivery Network (CDN): It makes the Internet faster for everyone.

A Content Delivery Network works by providing alternative end points for users to download resources (usually static content like images, video and JavaScript). These end points are spread throughout the world and are geographically CLOSER to your users; not farther away, thus ensuring a faster response and download time.

https://en.wikipedia.org/wiki/Content_delivery_network

CDNs ensure users download data from servers that are closest to their geographic proximity.

CDNs are recommended by Google Page Speed Insights for better site performance and also provide load balancing and some layer of protection from DDoS (denial-of-service) cyber-attacks. You can purchase your own CDN or safely use scripts that are already hosted on reputable CDNs as I have in the Fancybox 4 demo. BTW, I'm glad Fancybox worked for you.

Happy New Year!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 28, 2021

As l said in my first response, maybe a tabbed solution is not the best for what you are effectively describing, an image gallery.

Hopefully your struggles won't deter you, web development is not for the faint hearted, that's for sure. Many give up too quickly. It's a very steep and long learning curve but there is some satisfaction at the end of the rainbow, especially in the early years of learning, not so much when you realise the struggle never ends, that will just continue as you naturally progress and want to do more complex procedures.

Newbie times 4: modifying a script, which may be opening a can of worms

5 Correct answers