I have navigation, with a dropdown subnav that gives them two options (level 6 and level 10). If they click on one or the other, it loads "views.php" then uses .html to write the correct information to sections. The img src portion isn't working???
I also tried just using .html to replace the entire contents, instead of just the image src, but it still doesn't work.
$('#level_six,#level_ten').live("click", function(event){
$('.tnav-item').removeClass('selected');
$(this).addClass('selected');
if (!$('.tnav-views').hasClass("selected")) {
$('.tnav-views').addClass('selected');
}
var chosen = $(this);
$('#view_levels_subnav').addClass('selected').css('display','block').fadeTo("slow", 1 );
$('.content').fadeTo('slow', 0, function() {
$('.content').load('inc/floorplans/views.php', function() {
$('.content').fadeTo("slow", 1 );
Shadowbox.clearCache();
Shadowbox.setup();
if(chosen.attr("id") == "level_six") {
$("#floorswitch_link").html("SEE LEVEL 10 ››").addclass("gototen");
$("#floorswitch_header").html("EAST - LEVEL 6");
$("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");
$("#eastview").attr("src","images/views/6th_east_sm.jpg");
} else if(chosen.attr("id") == "level_ten") {
$('#floorswitch_link').html(' SEE LEVEL 6 ››').addclass("gotosix");
$("#floorswitch_header").html("EAST - LEVEL 10");
$("#view_east").html("<img id=\"eastview\" src=\"images/views/10th_east_sm.jpg\">");
$("#eastview").attr("src","images/views/10th_east_sm.jpg");
} else {
$('#floorswitch_link').html(' SEE LEVEL 10 ››').addclass("gototen");
$("#floorswitch_header").html("EAST - LEVEL 6");
$("#view_east").html("<img id=\"eastview\" src=\"images/views/6th_east_sm.jpg\">");
$("#eastview").attr("src","images/views/6th_east_sm.jpg");
};
});
});
here's the html:
<div class="views">
<div class="article">
<h2 class="h2_whiteBg">VIEW: <span id="floorswitch_header"> EAST - LEVEL 6 <!-- here I can change out info for what view is seen --></span></h2>
<div id="floorswitch_link"> </div>
<div class="view_selected" id="view_east" style="">
<img id="eastview" src="images/views/6th_east_sm.jpg">
</div>
<div class="views_div" id="view_north" style="">
<img id="northview" src="images/views/6th_north_sm.jpg">
</div>
<div class="views_div" id="view_west" style="">
<img id="westview" src="images/views/6th_west_sm.jpg">
</div>
<div class="views_div" id="view_south" style="">
<img id="southview" src="images/views/6th_south_sm.jpg">
</div>
<!-- the replacement divs -->
<div id="SubMenu">
<ul id="views_submenu" style="line-height:2em;z-index:2;float:left;padding-right:10px;">
<li><a style="color:#000;" class="views_submenu link_selected" id='link_east' href='#'>EAST</a></li>
<li><a style="color:#000;" class="views_submenu" id='link_north' href='#'>NORTH</a></li>
<li><a style="color:#000;" class="views_submenu" id='link_west' href='#'>WEST</a></li>
<li><a style="color:#000;" class="views_submenu" id='link_south' href='#'>SOUTH</a></li>
</ul>
</div>
</div>[/CODE]