Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matthew Jarvis 129 posts 129 karma points
    Mar 02, 2011 @ 15:58
    Matthew Jarvis
    0

    Help with getting lightbox to work in Umbraco

    Hey,

    Been trying for a few hours and getting more and more frustated.  Currently running Umbraco V3.0.5 and trying to get lightbox to work in Umbraco.

    My biggest problem appears that when I try to add rel="lightbox" to an image, tinymce strips this attribute and adds 2 numbers (presuming horizontal and vertical figures of some kind).

    I've digged around the old and new forum and cant seem to find an answer to what i'm trying. 

    If there was someone out there who could shed any light on how to get lightbox working that would be great.

    Cheers

    Matt

  • Matthew Jarvis 129 posts 129 karma points
    Mar 08, 2011 @ 16:47
    Matthew Jarvis
    0

    Intentional bump :-)

  • kows 81 posts 151 karma points c-trib
    Mar 08, 2011 @ 17:00
    kows
    1

    http://leandrovieira.com/projects/jquery/lightbox/#how-to-use this one?

    put script & link in your templates,

    add a class to your wanted lightboxes,

    following script block in the control you need it

    <script type="text/javascript">

    $(function(){

    $('.class').lightbox();

    });

    </script>

    don't forget to add jquery.

     

  • Matthew Jarvis 129 posts 129 karma points
    Mar 10, 2011 @ 10:05
    Matthew Jarvis
    0

    Kows,

    Tried your steps but unfortunately still not working, this is what i've done

    In the <head> of my template


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

    (Obviously included the relevent JS files above in the relevent folder)

    In the <body> of my template

    <div id="text_main">
    <script type="text/javascript">

    $(function(){

    $('.class').lightbox();

    });

    </script>
    <p><?UMBRACO_GETITEM field="bodyText"/></p>

    (Should the JS above be located in the Umbraco field bodyText as that is the field that displays the output from the RTE)

    In the RTE currently have this around an image

    <a href="/media/3296700/ycbb10%20948.jpg"><img class="lightbox" src="http://www.SOMEWEBSITEHIDDEN.??.>>/media/3296700/ycbb10%20948.jpg" alt="SOME ALT FOR image" title="SOME TITLE FOR image" width="299" height="448" rel="299,448" /></a>

    Seems like i'm close but not quite close enough, if your able to help further that would be great

    Thanks, Matt

     

  • kows 81 posts 151 karma points c-trib
    Mar 10, 2011 @ 10:12
    kows
    0

    <a href="/media/3296700/ycbb10%20948.jpg" class="class"><img class="lightbox" src="www.SOMEWEBSITEHIDDEN." alt="SOME ALT FOR image" title="SOME TITLE FOR image" width="299" height="448" rel="299,448" /></a>

    Check your javascript errors, where do you put them files?

    Normally i locate them under Includes/js or smth so:

    <script type="text/javascript" src="includes/js/jquery.js"></script>
    <script type="text/javascript" src="includes/js/jquery.lightbox-0.5.js"></script>

    depending on where you've put them

  • Matthew Jarvis 129 posts 129 karma points
    Mar 10, 2011 @ 10:44
    Matthew Jarvis
    0

    Javascript files are located in the JS folder so referenced correctly in my original post src="js/jquery.js" opened the files in Dreamweaver and none reporting errors.  Downloaded the latest version of jQuery also V1.5.1 was running V1.2.6 originally!

    Seems odd, when I click on the image it just opens it up within a new html page.

    I feel as if its close but obviously something slightly out somewhere, looking at the code in the <body> does that lightbox script need to somehow be included within the tag for the Umbraco field bodyText as this outputs what is in the rich text editor?

  • kows 81 posts 151 karma points c-trib
    Mar 10, 2011 @ 11:54
    kows
    0

    wasn't talking about code format for javascript,

    you've got firebug / chrome's console to see if javascript errors occur?

    Might also try adding a leading '/' in each src thing (src="/js/jquery.js")

    Your javascript aint happening as your html is doing what its told:

    a href to your img, thats the page you're opening.

    And it doesn't really matter where the .lightbox call is located, it gets executed when the document's ready.

    It should look like (changed "class" to clarify):

    <script type="text/javascript">
    $(function(){
    $('.lightboxlink').lightbox();
    });
    </script>

    <a href="/media/3296700/ycbb10%20948.jpg" class="lightboxlink"><img class="lightbox" src="www.SOMEWEBSITEHIDDEN." alt="SOME ALT FOR image" title="SOME TITLE FOR image" width="299" height="448" rel="299,448" /></a>

    For further help I'd really need to see that javascript error (which must be occurring imo)

  • Matthew Jarvis 129 posts 129 karma points
    Mar 10, 2011 @ 12:32
    Matthew Jarvis
    0

    Sorry matey, yeap Firebug has picked up an error which is below:-

    $(".class").lightbox is not a function

     

    Hoping you might know what it relates to.
    Cheers
    Matt
  • kows 81 posts 151 karma points c-trib
    Mar 10, 2011 @ 12:57
    kows
    0

    just noticed its .lightBox();

  • Matthew Jarvis 129 posts 129 karma points
    Mar 10, 2011 @ 13:05
    Matthew Jarvis
    0

    Great all solved just a capital letter, many thanks for your help

Please Sign in or register to post replies

Write your reply to:

Draft