SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Enabling Fancy Box - Uber Newbie

    Hey Guys,

    I can normally hack away at code to get what I want but this time I'm stumped before I've started.

    I just discovered Fancy Box - Sweet!
    I'm trying to get it to work here.


    It says in the , albeit, bare bones instructions to "Fire the Plugin" - I'm guessing that's where my problem lies but I'm not sure where to put that code.

    Thankyou,
    Herb.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump...
    Anyone?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    First you need a link element that will be used to activate fancybox. That's step three at http://fancy.klade.lv/howto for the inline content.

    Code html4strict:
    <a id="showblocks" href="#portblocks">This shows content of element who has id="portblocks"</a>

    When they say to kick things off, they mean for you to use something like this:

    Code javascript:
    $(document).ready(function() {
    	$("a#showblocks").fancybox();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any more help would be appreciated. I'm lost.

    Here's what I have:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.fancybox.js"></script>
    <link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen">


    <script type="text/javascript">
    $(document).ready(function() { /* This is basic - uses default settings */ $("a#test1").fancybox(); /* Using custom settings */ $("a#test2").fancybox({ 'hideOnContentClick': true }); $("a.test3").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });
    </script>

    </head>

    <body>
    <div id="portblocks">
    <p><a id="showblocks" href="#portblocks"><img src="images/portfolio-mkpl.jpg" alt="dfhdf" title="heres a caption" width="427" height="134" align="left"/></a>CMS &amp; E-Commerce: x
    dddd </p>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    You don't appear to have the files for
    • jquery.fancybox.js
    • jquery.fancybox.css


    Then you need to:
    • provide some link text with an identifier, which you'll use trigger the fancybox, as mentioned in my previous post
    • Remove unused parts of the "default settings" for three different fancyboxes. Remove the ones for test2 and test3, and modify test1 so it refers instead to the identifier on your text link


    Sing to the tune of Dry Bones

    The fancybox's connected to the link text
    The link text's connected to initializer
    The initializer's connected to the fancybox script
    The fancybox script's connected to the code files

    So in summary, you're missing:
    • the source code files
    • the link text
    • an identifier for the link text
    • the correct initialization code


    What you do have right is:
    • the html content for the fancybox


    Task #1 should be to ensure that the script files are linking to script files that exist
    Tast #2 should be to create the link text, and to put an identifier on the link text
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I hadn't updated the code on the forum with the new code on the site.
    The files exist Here:
    http://neurovision.com.au/dev/fancy/jquery-1.3.2.min.js
    and Here:
    http://neurovision.com.au/dev/fancy/...cybox-1.2.0.js

    The link is the thumbnail image which should open a larger version of the image.
    Note the 3 options in Step 3 for Images is a regular a href:

    3. Create a link element (<a href>)
    For images <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

    EDIT: Hang About!

    I think I got it.
    Thankyou so much for your help!


Bookmarks

Posting Permissions

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