Multiple uses but with single call to JS file - how?

Adendum · Post by **Adendum** » Mon Jan 06, 2014 5:44 pm

Hi builders,

Has anyone got a EB code snippet (or a how to) to allow me to provide users the ability to place several instances of the same extension on a page but only call in the jQuery file once?

Paul

BaconFries · Post by **BaconFries** » Mon Jan 06, 2014 6:01 pm

Hi Paul I use this for the Youtube fancybox extension, note the two ID's (in red) one ID for a Div to surround the main Div of the Youtube/image the other ID for the image used. This allows the user to set the ID for each extension usewd with this extension and only uses one set of scripts

<div id="wb_video1" style="overflow:hidden;position:absolute;top:$TOP$px">
<div>
<a title="Click to View." href="http://www.youtube.com/v/ZeStnz5c2GI&re ... =1&start=0" class="video">
<img src="images/mypic.jpg" id="video1" alt="Click to View." style="width:120px;height:90px;z-index:0"/></a>
</div>
</div>

Oh and a Happy Birtday to you.....

cake.png

Adendum · Post by **Adendum** » Mon Jan 06, 2014 6:07 pm

Bacon,

Not sure how that helps old chap?

This is what I currently have the the EB <head> section:-

Code: Select all

<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-$uiid$.css" type="text/css">

And if the extension is used 2 or more times the resulting HTML generates 2 or more lines of <script src="LiquidZoom/js/liquid-zoom.js">.

What I am trying to implement is a method to write <script src="LiquidZoom/js/liquid-zoom.js"> just the once, no matter how many times the extension is used on a page.

BaconFries · Post by **BaconFries** » Mon Jan 06, 2014 6:13 pm

Hmmm well with the Youtube fancy box extension I know I can add more than one simply changing the ID for each one used and I only ever get one instance of the css/js file used. If you were to install my Extension of Youtube Fancybox you will see that this is the case

Adendum · Post by **Adendum** » Mon Jan 06, 2014 6:21 pm

Sorry Bacon, still confused by this...oh and thanks for the birthday cake

Each use of the extension (Liquid Zoom) will run through the file and dump the contents of the <head> into the generated html, so I'll see the following:-

Code: Select all

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-1.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-2.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-3.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-4.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-5.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-6.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-7.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-8.css" type="text/css">
</head>

but what I want to see is :-

Code: Select all

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-1.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-2.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-3.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-4.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-5.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-6.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-7.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-8.css" type="text/css">
</head>

So I need a method to allow the CSS calls to be repeated but not the jQuery. Am I not understanding you or are you not understanding me?

Post by **Pablo** » Mon Jan 06, 2014 6:24 pm

@Adendum
Happy birthday!

The trick is to make sure the header code is the same for all instances of the extension , so there should not be any variables in it.

In your case, put
<script src="LiquidZoom/js/liquid-zoom.js"></script>
between the head tags and move
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-$uiid$.css" type="text/css">
to the body

Adendum · Post by **Adendum** » Mon Jan 06, 2014 6:33 pm

lol, Pablo!!!!!!! Way too easy!

Many MANY thanks!

www.wysiwygwebbuilder.com

Multiple uses but with single call to JS file - how?

Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?

Re: Multiple uses but with single call to JS file - how?