Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

Captify jQuery Problem

Discussion in 'Javascript, AJAX, and JSON' started by BallardStudio, Aug 7, 2011.

Page 1 of 2
  1. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    I've been trying to apply Captify jQuery into my webpage and have been having a problem. Below is what I have in the <head>
    <script src="../js/prototype.js" type="text/javascript"></script>
    <script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="../js/lightbox.js" type="text/javascript"></script>
    <script src="../js/captify.tiny.js" type="text/javascript"></script>
    <script src="../js/captify.tiny.js" type="text/javascript"></script>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('img.captify').captify({});
    });
    </script>

    My image tags look like this:
    <td width="138"><a href="../images/aw_gaf_harley_promo.jpg" rel="lightbox" title="Harley-Davidson Promotion | GAF Materials Corporation | Concept"><img src="../images/aw_gaf_harley_promo_thumb.jpg" class="captify" alt="GAF-Harley Promotion-Ballard Studio" width="120" height="155" border="0" /><br />
    </a></td>

    The javascript is too long to post. Any ideas as to why the page wouldn't be posting correctly? If more info is needed, please let me know.


    BallardStudio, Aug 7, 2011
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    AlphaMare WDF Moderator

    Message Count:
    3,965
    Likes Received:
    710
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada
    It would help to know what the exact problem is - "not displaying properly" is pretty vague. Is the page online somewhere we could look at it?

    At a guess, it may have something to do with the part I've highlighted in red above - you are calling the same script twice - why?


    AlphaMare, Aug 7, 2011
    #2
  4. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male


    BallardStudio, Aug 7, 2011
    #3
  5. Offline

    AlphaMare WDF Moderator

    Message Count:
    3,965
    Likes Received:
    710
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada


    AlphaMare, Aug 7, 2011
    #4
  6. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    There is no function whatsoever. I tested it in both Firefox and Safari locally. I was going to make the page live to see if that made a difference, but wasn't sure if that was worth it.


    BallardStudio, Aug 7, 2011
    #5
  7. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male


    BallardStudio, Aug 7, 2011
    #6
  8. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    Here's the new head, deleting the error:

    <script src="../js/prototype.js" type="text/javascript"></script>
    <script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="../js/lightbox.js" type="text/javascript"></script>
    <script src="../js/captify.tiny.js" type="text/javascript"></script>
    <script src="../js/captify.js" type="text/javascript"></script>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('img.captify').captify({});
    });
    </script>


    BallardStudio, Aug 7, 2011
    #7
  9. Offline

    DanExcell Active Member

    Message Count:
    422
    Likes Received:
    77
    Trophy Points:
    28
    Gender:
    Male
    Using multiple javascript libraries could be the problem. This means you might have to use JQuery in a no conflict way ($Jquery as oppose to just calling on it as $). What I would like to know what you are using Prototype and scriptaculous for and can you use JQuery for it instead. It's a strong possibility that you might have the different libraries fighting the same "$" tag.


    DanExcell, Aug 7, 2011
    #8
  10. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    This is going above my head now. Let me explain...

    I am using jQuery Lightbox for the images on my portfolio page. http://www.ballardstudio.com/ballard_studio_portfolio.html. So once you click on an image, it goes into Lightbox for the presentation (That's another problem. Lightbox isn't showing the previous and next buttons. Might be part of the conflict). Prototype and Scriptaculous were supplied to run Lightbox. I thought they were necessary.

    Once I saw Captify, I wanted to use it for my thumbnail images to show a description before the image opened. So when I tried to apply both, that's when the problem occurred.


    BallardStudio, Aug 7, 2011
    #9
  11. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    I also tried a standalone page (below) and I still can't get this to work. What I did different is added the java script to the head section (recommended on http://thirdroute.com/projects/captify/) The image appears correctly, but no sliding window appearing from the image.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="../sample.css" />
    <script src="../js/captify.tiny.js" type="text/javascript"></script>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('img.captify').captify({
    // all of these options are... optional
    // ---
    // speed of the mouseover effect
    speedOver: 'fast',
    // speed of the mouseout effect
    speedOut: 'normal',
    // how long to delay the hiding of the caption after mouseout (ms)
    hideDelay: 500,
    // 'fade', 'slide', 'always-on'
    animation: 'slide',
    // text/html to be placed at the beginning of every caption
    prefix: '',
    // opacity of the caption on mouse over
    opacity: '0.7',
    // the name of the CSS class to apply to the caption box
    className: 'caption-bottom',
    // position of the caption (top or bottom)
    position: 'bottom',
    // caption span % of the image
    spanWidth: '100%'
    });
    });
    </script>
    </style>
    </head>
    <a href="http://www.ballardstudio.com"><img src="logo.gif" class="captify" rel="Logo Test" /></a>
    <body>
    </body>
    </html>


    BallardStudio, Aug 7, 2011
    #10
  12. Offline

    DanExcell Active Member

    Message Count:
    422
    Likes Received:
    77
    Trophy Points:
    28
    Gender:
    Male
    You need to show the html also. That way the page can be duplicated and most likely the problem will be isolated.


    DanExcell, Aug 7, 2011
    #11
  13. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male


    BallardStudio, Aug 7, 2011
    #12
  14. Offline

    m3n0tu18 WDF Moderator and Drupalite!

    Message Count:
    1,372
    Likes Received:
    248
    Trophy Points:
    63
    Gender:
    Male
    Location:
    New York
    send me a zip of your website, ill try to fix it here for you.


    m3n0tu18, Aug 7, 2011
    #13
  15. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    That's too much to ask.


    BallardStudio, Aug 8, 2011
    #14
  16. Offline

    AlphaMare WDF Moderator

    Message Count:
    3,965
    Likes Received:
    710
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada
    Actually, he is one of the most generous folks on here (kudos for that, m3n0tu18 - but next time choose an easier username - I can't type it from memory!) - he has fixed code for several people.:)
    Send him the zip and ask that he comment it so you know what he has done to fix it. It will help you out, and I know from experience that he will probably also get something from it, as fixing problems is a great way to expand experience.


    AlphaMare, Aug 8, 2011
    #15
    m3n0tu18 likes this.
  17. Offline

    m3n0tu18 WDF Moderator and Drupalite!

    Message Count:
    1,372
    Likes Received:
    248
    Trophy Points:
    63
    Gender:
    Male
    Location:
    New York
    Hehe thanks :D Its good to know I'm useful, my username is me not you in long words so just think of it like that and replace the e and o with 3 and 0 :p


    m3n0tu18, Aug 8, 2011
    #16
    AlphaMare likes this.
  18. Offline

    AlphaMare WDF Moderator

    Message Count:
    3,965
    Likes Received:
    710
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada
    OH! *slaps forehead* I should have tried phonetics on it - it's a trick I use sometimes myself, using emmaybell instead of M.A. Bell....:oops:


    AlphaMare, Aug 8, 2011
    #17
  19. Offline

    m3n0tu18 WDF Moderator and Drupalite!

    Message Count:
    1,372
    Likes Received:
    248
    Trophy Points:
    63
    Gender:
    Male
    Location:
    New York
    haha, great minds think alike ey?! lol


    m3n0tu18, Aug 8, 2011
    #18
  20. Offline

    AlphaMare WDF Moderator

    Message Count:
    3,965
    Likes Received:
    710
    Trophy Points:
    113
    Gender:
    Female
    Location:
    Montreal, Canada
    Well, not sure about the "great minds" part - I have my moments, but I can be pretty dim.
    Sometimes people on here call me AM - I was terribly confused, thinking they got my initials backwards, then I realized they meant AM, short for AlphaMare ...


    AlphaMare, Aug 8, 2011
    #19
    m3n0tu18 likes this.
  21. Offline

    BallardStudio Member

    Message Count:
    132
    Likes Received:
    6
    Trophy Points:
    18
    Gender:
    Male
    Big thanks to everyone.


    BallardStudio, Aug 8, 2011
    #20
(You have insufficient privileges to reply here.)
Page 1 of 2

Share This Page