...

View Full Version : Passing information from HTML to Javascript (again)



Philipot
07-17-2012, 04:38 PM
Hi everyone.
I'm writing a website page that consists of three HTML links that are displayed as clickable images that take the user to other pages displayed in fancybox pages.

Unfortunately, each of the fancybox pages needs to be a different size so I'm looking for a way to pass different width and height sizes from the links to the fancybox code.

Could anybody please help me with the code?

Many thanks in anticipation.

Philip

Keleth
07-17-2012, 05:10 PM
That depends on exactly which fancybox you're using, but all I've seen have their own APIs... the one at fancybox.net mentions details its API really well... just give each its own options.

DrDOS
07-17-2012, 05:55 PM
I wrote this magical code thing a while ago just to fit your purpose.


<html>
<head>
<title></title>
<meta content="">
<style>
body
{
text-align:center;
width:1000px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
background-color:#333;
}
p
{
background-color:Aliceblue;
border:2px solid Red;
font-size: 24px;
padding:20px;
display: block;
}
</style>
<base href="http://www.sheprescue.org/images/">
<script type="text/javascript">
//Alerts to errors.
window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
</script>
<script type="text/javascript">

imagelist=[
"benny von lancaster 3.JPG",
"benny von lancaster 4.JPG",
"benny von lancaster 5.JPG",
"benny von lancaster 6.JPG",
"benny von lancaster 7.JPG",
"benny von lancaster 8.JPG",
"benny von Lancaster 9.JPG",
"benny von lancaster 10.JPG"];

timer = window.setInterval("getData();",200);

var x = 0; var X = 0; datablock = "imagelist = Array() ; imagelist=[<br>\n";
function getData()
{
if ( X%6 == 0 ) {document.getElementById("showdata").innerHTML="<img src=\""+imagelist[x]+"\"><br>\n"; }
if ( X%6 == 5 )
{
if ( x == imagelist.length-1 ){datablock += "\""+imagelist[x]+"|"+document.images[0].width+"|"+document.images[0].height+"||\"];<br>\n";}
else {datablock += "\""+imagelist[x]+"|"+document.images[0].width+"|"+document.images[0].height+"||\",<br>\n";}
x++ ;
if ( x == imagelist.length )
{
window.clearInterval(timer) ;
var mywin = document.getElementById("showdata")
mywin.innerHTML=datablock;
mywin.style.display = 'block';
}
}
X++;
}
</script>
</head>
<body>
<p id="showdata"></p>
</body>
<script type="text/javascript"></script>
</html>

You can open the page right now and it should work. You need to change the image array to your images and the base href to your liking to use it. It uses the plain array that you put in to build a new array that has size info and two other slots to put info in. Just use .split("|") to convert each array element into another array and extract the information. For larger files increase the interval. Enjoy.

Keleth
07-17-2012, 06:08 PM
Uh... DrDOS, what does that code have to do with anything? It gets the height/width, but does nothing to help pass the information to a plugin? In addition, there are far simpler techniques to getting a images height/width.

DrDOS
07-17-2012, 06:19 PM
Uh... DrDOS, what does that code have to do with anything? It gets the height/width, but does nothing to help pass the information to a plugin? In addition, there are far simpler techniques to getting a images height/width.You're the guy working with the plugin, you have to figure out some way to use the built array to pass the information to the plugin. I haven't seen one line of code of the plugin, how am I supposed to know?

Keleth
07-17-2012, 06:41 PM
What? I didn't start this thread... the OP asked how he could pass information from his code to a plugin he's using, specifically a fancybox. What does this have to do with me? And given the OP is asking how to pass information to a plugin, what good is giving him other code that doesn't do that and isn't directly related?

I apologize if it sounds like I'm coming off aggressive, because you seem to have taken offense to my last post, but I was just trying to see if your code did more then I noticed or I missed something. Apparently not?

DrDOS
07-17-2012, 07:05 PM
What? I didn't start this thread... the OP asked how he could pass information from his code to a plugin he's using, specifically a fancybox. What does this have to do with me? And given the OP is asking how to pass information to a plugin, what good is giving him other code that doesn't do that and isn't directly related?

I apologize if it sounds like I'm coming off aggressive, because you seem to have taken offense to my last post, but I was just trying to see if your code did more then I noticed or I missed something. Apparently not?Sorry, I got you mixed up with the OP. No, I don't take offense easily, but it's the OP who needs to use the array, and I don't know how because I don't know his code. The little page just supplies him with the information that needs to be passed. He may have other means of getting it. He can also lift the code from the page and tailor it to his needs.

Philipot
07-17-2012, 07:11 PM
Sorry, I got you mixed up with the OP. No, I don't take offense easily, but it's the OP who needs to use the array, and I don't know how because I don't know his code. The little page just supplies him with the information that needs to be passed. He may have other means of getting it. He can also lift the code from the page and tailor it to his needs.

Great, Thanks very much - I'll have a play. I hope you don't mind if I come back to you if I get stuck. My Javascript knowledge is very basic at the moment.

Philip

Philipot
07-20-2012, 04:07 PM
Thanks again DrDOS, that's a really neat piece of code but it doesn't quite fit my requirements. That's because I didn't explain myself very well.

Fancybox will accept the width and height of the window you wish it to create. I want to use it to display a choice of three webpages. My problem is that the pages are different sizes so two of the fancybox windows look messy.

Here is my fancybox code.

<script>
var winWidth=990;
var winHeight=950;
$(document).ready(function() {
$('.iframe').fancybox({
overlayOpacity: .25,
overlayColor: '#D8C1A9',
width: winWidth,
height: winHeight,
padding: 10,
transitionIn: 'elastic',
transitionOut: 'elastic',
titlePosition: 'outside'
});
}); // end ready

You will see that I have used two variables winWidth and winHeight. So the problem is how I can pass these variables to the fancybox script from each of the three links?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum