Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Passing information from HTML to Javascript (again)

    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

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    I wrote this magical code thing a while ago just to fit your purpose.
    Code:
    <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.
    Last edited by DrDOS; 07-17-2012 at 05:57 PM.

  • Users who have thanked DrDOS for this post:

    Philipot (07-17-2012)

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Quote Originally Posted by Keleth View Post
    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?

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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?

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Quote Originally Posted by Keleth View Post
    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.

  • #8
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    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

  • #9
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •