Page 1 of 1
Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 5:44 pm
by Adendum
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
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:01 pm
by BaconFries
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
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:07 pm
by Adendum
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.
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:13 pm
by BaconFries
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
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:21 pm
by Adendum
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?
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:24 pm
by Pablo
@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
Re: Multiple uses but with single call to JS file - how?
Posted: Mon Jan 06, 2014 6:33 pm
by Adendum
lol, Pablo!!!!!!! Way too easy!
Many MANY thanks!
