A little help streamlining some code

JavaScript
,
1

Hi,

I’ve recently installed a copy of Fancybox 2 (jQuery lightbox script) on a site ([fancyBox - Fancy jQuery Lightbox Alternative][1] for ref). As part of the process I had to modify the code a little in order to get what I needed - I have managed this but am pretty sure the resulting code could be significantly cleaned up as it looks a pretty messy, sadly this is beyond my very basic skills.

Any help would be greatly appreciated.

<script type="text/javascript">
	$(document).ready(function() {

		$('.fancybox').fancybox();

		$("#SL01").click(function() {
			$.fancybox.open([
				{
					href : 'images/SL.01.png',
					title : 'Homepage'
				}
			], {
				helpers : {
					thumbs : {
						width: 75,
						height: 50
					}
				}
			});
		});
		
		$("#SL02").click(function() {
			$.fancybox.open([
				{
					href : 'images/SL.02.png',
					title : 'Login page 1'
				}
			], {
				helpers : {
					thumbs : {
						width: 75,
						height: 50
					}
				}
			});
		});
					
		$("#moreInfo").click(function() {
			$.fancybox.open({
				href : 'info.html',
				type : 'iframe',
				padding : 5
			});
		});
		
		$("#quicklinks").click(function() {
			$.fancybox.open({
				href : 'quicklinks.html',
				type : 'iframe',
				padding : 5
			});
		});
		
	});
	
	
</script>

Thanks in advance for any help.

B
[1]: http://fancyapps.com/fancybox/

2

Can you post the markup that goes with that (or a demo page)?

3

Hi Pullo,

Thank you for the response.

Probably easiest to direct you to the demo page of the actual script here: Demo page

I’ve combined the standard Open single item with the iframe hope that helps.

B

4

Hi,

It would be better/easier if you could just provide the code you are working with.

5

Hi Pullo,

Understood. Apologies for the delay just had to put a simplified version together.

I was going to upload a zip but as I am new I can’t, hopefully I can share with a direct link to some web space.

Zip file of page demo

Hope this make things clearer. You’ll see the code above in the head of the index page

B

6

Hi there,

I would do it like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>FancyBox 2</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" media="screen" href="lib/jquery.fancybox.css"/>
  </head>

  <body id="journeyFlow">
    <div id="header">
      <h1>FancyBox Working</h1>
    </div>

    <div id="mainContent">
      <p>
        <a id="SL01" href="#" data-image="images/1.jpg">Image 01</a> |
        <a id="SL02" href="#" data-image="images/2.jpg">Image 02</a>
      </p>

      <div id="footer">
        <p>
          <a id="quicklinks" href="#">Content Quicklinks</a> |
          <a id="info" href="#">About this Map</a>
        </p>
      </div>
    </div>

    <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    <script src="lib/jquery.fancybox.js"></script>
    <script type="text/javascript">
      $('.fancybox').fancybox();
      $("a[id^='SL']").click(function() {
        $.fancybox.open([{
          href : $(this).data("image"),
          title : $(this).text()
        }]);
      });

      $("#info, #quicklinks").click(function() {
        $.fancybox.open({
          href : this.id + ".html",
          type : 'iframe',
          padding : 5
        });
      });
    </script>
  </body>
</html>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.