Page 1 of 1

javascript light box conflict

Posted: Wed Sep 12, 2012 2:19 pm
by jonnyfortis
Hello been looking at this for days now and cant fix it
I have a show hide div setup using a select list
<script language="JavaScript1.2" type="text/javascript">
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$('#box4').hide();
$('#box5').hide();
$('#box6').hide();
$('#box7').hide();
$('#box8').hide();
$('#box9').hide();
$('#box10').hide();
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});

$("#thechoices").change();
});
</script>


<select class="meduimTXT" id="thechoices">
<option value="box1" selected="selected">Select Item</option>
<option value="box2">item 1</option>
<option value="box3">item 2</option>
<option value="box4">item 3</option>
<option value="box5">item 4</option>
</select>

<div id="collapsable"><div id="boxes">
<div id="box1">show</div>
<div id="box2">show</div>
<div id="box3">show</div>
<div id="box4">show</div>
<div id="box5">show</div>
</div></div>
i then have images on the page that i want to use a lightbox script with so i used the following
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
and this stopped the divs working.

i then removed the lightbox and nothing is working now...

can anyone help please

Re: javascript light box conflict

Posted: Thu Sep 13, 2012 8:44 am
by jonnyfortis
i have sorted it and just remade the page and i decided to work?? strange