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.
(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
<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:
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?
<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)
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
Intentional bump :-)
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.
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
<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
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?
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)
Sorry matey, yeap Firebug has picked up an error which is below:-
just noticed its .lightBox();
Great all solved just a capital letter, many thanks for your help
is working on a reply...