1. <style>
  2. /* Carousel */
  3. #sw_denver_content #d_carousel { background:url('/landing/den/images/sw-denver/bg_top_carousel.jpg') no-repeat; height:410px; overflow:hidden; position:relative; width:960px; }
  4. #sw_denver_content #d_carousel .window { margin:0 auto; position:relative; width:849px; overflow:hidden; }
  5. #sw_denver_content #d_carousel .scene { position:relative; width:999999px; }
  6. #sw_denver_content #d_carousel .scene ul li { display:block; float:left; height:400px; position:relative; text-align:center; width:280px; }
  7. #sw_denver_content #d_carousel .scene ul li .person { background: url('/landing/den/images/sw-denver/sprite_people1.png') no-repeat; color:#83C4FA; display:inline-block; font-size:1px; height:400px; overflow:hidden; width:280px; }
  8. #sw_denver_content #d_carousel .scene ul li .clicked { } /*for 3rd state - after a person has been clicked once*/
  9. #sw_denver_content #d_carousel .scene ul li .open { background: url('/landing/den/images/sw-denver/sprite_people2.png') no-repeat; }
  10. #sw_denver_content #d_carousel .scene ul li .details { background:url('/landing/den/images/sw-denver/bg_person-detail_left.png') no-repeat left 13px; display:none; position:absolute; top:50px; left:175px; height:313px; padding-left:46px; width:0; }
  11. #sw_denver_content #d_carousel .scene ul li .details .content { background:url('/landing/den/images/sw-denver/bg_person-detail_right.png') no-repeat right 13px; height:313px; line-height:18px; overflow:hidden; }
  12. #sw_denver_content #d_carousel .scene ul li .details .space { display:none; height:313px; overflow:hidden; padding-top:20px; width:620px; }
  13. #sw_denver_content #d_carousel .scene ul li .details .title { background-repeat:no-repeat; position:absolute; height:303px; top:35px; left:0px; width:662px; z-index:0; }
  14. #sw_denver_content #d_carousel .scene ul li .details .text { font-family:Verdana; font-size:12px; height:300px; line-height:18px; position:relative; width:100%; z-index:1; }
  15. #sw_denver_content #d_carousel .scene ul li .details .text p { display:block; width:345px; position:absolute; top:100px; right:0; }
  16. #sw_denver_content #d_carousel .scene ul li .details .text .yesLink { color:#ff0000; font-weight:700; font-style:normal; text-transform:uppercase; }
  17.  
  18. /* Carousel:people */
  19. /*paul*/
  20. #sw_denver_content #d_carousel .scene ul li.person1 a.person { background: url('/landing/den/images/sw-denver/person_paul.png') 0 0; }
  21. #sw_denver_content #d_carousel .scene ul li.person1 .title { background-image: url('/landing/den/images/sw-denver/person_paul-details.png'); background-position: 20px 0; }
  22. #sw_denver_content #d_carousel .scene ul li.person1 .text p { width:320px; top:100px; right:20px; }
  23. /*calvin*/
  24. #sw_denver_content #d_carousel .scene ul li.person2 a.person { background: url('/landing/den/images/sw-denver/person_calvin.png') 0 0; }
  25. #sw_denver_content #d_carousel .scene ul li.person2 .title { background-image: url('/landing/den/images/sw-denver/person_calvin-details.png'); }
  26. #sw_denver_content #d_carousel .scene ul li.person2 .text p { width:345px; top:100px; right:10px; }
  27. /*Lydia*/
  28. #sw_denver_content #d_carousel .scene ul li.person3 a.person { background: url('/landing/den/images/sw-denver/person_lydia.png') 0 0; }
  29. #sw_denver_content #d_carousel .scene ul li.person3 .title { background-image: url('/landing/den/images/sw-denver/person_lydia-details.png'); }
  30. #sw_denver_content #d_carousel .scene ul li.person3 .text p.p1 { width:315px; top:100px; right:10px; }
  31. #sw_denver_content #d_carousel .scene ul li.person3 .text p.p2 { width:290px; top:208px; right:auto; left:0; font-size:9px; line-height:10px; color:#666; }
  32. #sw_denver_content #d_carousel .scene ul li.person3 .text .disclaimer {position:absolute; top:107px; right:0; width:327px; font-size:9px; line-height:10px; color:#666; }
  33. #sw_denver_content #d_carousel .scene ul li.person3 .text .disclaimer p {float:left; height:12px; display:block; position:relative; padding-bottom:4px; }
  34. /*tyrone*/
  35. #sw_denver_content #d_carousel .scene ul li.person4 a.person { background: url('/landing/den/images/sw-denver/person_tyrone.png') 0 0; }
  36. #sw_denver_content #d_carousel .scene ul li.person4 .title { background-image: url('/landing/den/images/sw-denver/person_tyrone-details.png'); }
  37. #sw_denver_content #d_carousel .scene ul li.person4 .text p.p1 { width:580px; top:70px; right:auto; left:23px; }
  38. #sw_denver_content #d_carousel .scene ul li.person4 .text p.p2 { width:245px; top:150px; right:5px }
  39. #sw_denver_content #d_carousel .scene ul li.person4 .text p.p2 .hint{ font-size:9px; line-height:9px;}
  40. /*john*/
  41. #sw_denver_content #d_carousel .scene ul li.person5 a.person { background: url('/landing/den/images/sw-denver/person_john.png') 0 0; }
  42. #sw_denver_content #d_carousel .scene ul li.person5 .title { background-image: url('/landing/den/images/sw-denver/person_john-details.png'); }
  43. #sw_denver_content #d_carousel .scene ul li.person5 .text p { width:375px; margin-top:10px; right:10px; }
  44. #sw_denver_content #d_carousel .scene ul li.person5 .text p.p2 { top:220px; font-size:9px; line-height:10px; color:#666; right:230px; }
  45. /*kate*/
  46. #sw_denver_content #d_carousel .scene ul li.person6 a.person { background: url('/landing/den/images/sw-denver/person_kate.png') 0 0; }
  47. #sw_denver_content #d_carousel .scene ul li.person6 .title { background-image: url('/landing/den/images/sw-denver/person_kate-details.png'); background-position: 10px 0; }
  48. #sw_denver_content #d_carousel .scene ul li.person6 .text p { right:10px; top:80px; width:330px; }
  49. /*randi*/
  50. #sw_denver_content #d_carousel .scene ul li.person7 a.person { background: url('/landing/den/images/sw-denver/person_randi.png') 0 0; }
  51. #sw_denver_content #d_carousel .scene ul li.person7 .title { background-image: url('/landing/den/images/sw-denver/person_randi-details.png'); background-position: 10px 0; }
  52. #sw_denver_content #d_carousel .scene ul li.person7 .text p.p1 { width:590px; top:70px; right:auto; left:23px; }
  53. #sw_denver_content #d_carousel .scene ul li.person7 .text p.p2 { width:450px; top:130px; right:20px; }
  54.  
  55.  
  56. /* any special case that has been clicked once that needs a different pose */
  57. #sw_denver_content #d_carousel .scene ul li.person2 a.clicked { background-position:-840px 0; }
  58.  
  59. /* hover states and open states */
  60. #sw_denver_content #d_carousel .scene ul li a.person:hover { background-position:-560px 0!important; }
  61. #sw_denver_content #d_carousel .scene ul li a.open,
  62. #sw_denver_content #d_carousel .scene ul li a.open:hover { background-position:-280px 0!important; }
  63.  
  64.  
  65. /* Carousel:controls */
  66. #sw_denver_content #d_carousel .control { background:url('/landing/den/images/sw-denver/sprite_bg_scrollarrows.png') no-repeat; display:block; height:48px; margin-top:-26px; position:absolute!important; top:50%; width:50px;}
  67. #sw_denver_content #d_carousel .next { background-position:-64px -47px; right:10px;}
  68. #sw_denver_content #d_carousel .next:hover { background-position:-64px 0; }
  69. #sw_denver_content #d_carousel .prev { background-position:0 -47px; left:10px; }
  70. #sw_denver_content #d_carousel .prev:hover { background-position:0 0; }
  71. #sw_denver_content #d_carousel .close { background:url('/landing/den/images/sw-denver/btn_close.png') no-repeat 0 -33px; height:33px; width:33px; margin:0; top:auto; bottom:25px; right:25px; z-index:5; }
  72. #sw_denver_content #d_carousel .close:hover { background-position: top left; }
  73.  
  74. </style>
  75.  
  76. <span id="carousel_png">
  77.  
  78. <a href="#next" class="control next png_bg"></a>
  79. <a href="#prev" class="control prev png_bg" style="display:none;"></a>
  80.  
  81. <div class="window">
  82. <div class="scene">
  83. <ul class="clearfix">
  84. <li class="person1 current">
  85. <a href="#" class="person png_bg imgReplacement" title="Paul"><span>Paul</span></a>
  86. <div class="details png_bg">
  87. <div class="content png_bg">
  88. <div class="space">
  89. <div class="title imgReplacement"><span>quote goes here</span></div>
  90. <div class="text clearfix">
  91. <p>
  92. With Southwest Airlines, your first two bags are taken care of. They're free! And that means our love will save you up to $120 every roundtrip. There's no better reason to say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> to Southwest.
  93. </p>
  94. </div>
  95. <a href="#close" class="control close png_bg"></a>
  96. </div>
  97. </div>
  98. </div>
  99. </li>
  100. <li class="person2">
  101. <a href="#" class="person png_bg imgReplacement" title="Calvin"><span>Calvin</span></a>
  102. <div class="details png_bg">
  103. <div class="content png_bg">
  104. <div class="space">
  105. <div class="title imgReplacement"><span>quote goes here</span></div>
  106. <div class="text clearfix">
  107. <p>
  108. With 133 convenient flights every day and more destinations than you could ever dream of, we can honeymoon whenever and wherever you want to. Just be sure to tell us <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> first.
  109. </p>
  110. </div>
  111. <a href="#close" class="control close png_bg"></a>
  112. </div>
  113. </div>
  114. </div>
  115. </li>
  116. <li class="person3">
  117. <a href="#" class="person png_bg imgReplacement" title="Lydia"><span>Lydia</span></a>
  118. <div class="details png_bg">
  119. <div class="content png_bg">
  120. <div class="space">
  121. <div class="title imgReplacement"><span>quote goes here</span></div>
  122. <div class="text clearfix">
  123. <p class="p1">
  124. We're offering you everything we have to give - from loving smiles and low fares to ontime flights and no change fees<sup>1</sup>. And to really prove our dedication, we're offering you a chance to win two free flights<sup>2</sup> just for saying <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a>
  125. </p>
  126. <p class="p2">
  127. For 2008 among all carriers that report as part of the Air Travel Consumer Report. From September 1987 through February 2010, Southwest Airlines has maintained the best cumulative ontime performance among all Major U.S. airlines according to the Air Travel Consumer Report.
  128. </p>
  129. <div class="disclaimer">
  130. <p><sup>1</sup> Applicable fare difference may apply.</p>
  131. <p><sup>2</sup> September 11th Security Fee applies.</p>
  132. </div>
  133. </div>
  134. <a href="#close" class="control close png_bg"></a>
  135. </div>
  136. </div>
  137. </div>
  138. </li>
  139. <li class="person4">
  140. <a href="#" class="person png_bg imgReplacement" title="Tyrone"><span>Tyrone</span></a>
  141. <div class="details png_bg">
  142. <div class="content png_bg">
  143. <div class="space">
  144. <div class="title imgReplacement"><span>quote goes here</span></div>
  145. <div class="text clearfix">
  146. <p class="p1">
  147. Whether traveling for business or just for fun, you deserve to be one of the first to board, have plenty of room for your carryon and have a drink onboard. That's why we offer our Business Select Fare.
  148. </p>
  149. <p class="p2">
  150. Upgrade today, and enjoy your travel experience even more.
  151. <br/><br/>
  152. <span class="hint">Seats limited. Fly By at participating airports.</span>
  153. </p>
  154. </div>
  155. <a href="#close" class="control close png_bg"></a>
  156. </div>
  157. </div>
  158. </div>
  159. </li>
  160. <li class="person5">
  161. <a href="#" class="person png_bg imgReplacement" title="John"><span>John</span></a>
  162. <div class="details png_bg">
  163. <div class="content png_bg">
  164. <div class="space">
  165. <div class="title imgReplacement"><span>quote goes here</span></div>
  166. <div class="text clearfix">
  167. <p class="p1">
  168. At Southwest Airlines, you get to choose your seat. We'll lock in your boarding position when you check in online, so you can sit back, relax and recharge until your group is called. That's how much we care about you, and it's just another reason to say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> to Southwest.
  169. </p>
  170. <p class="p2">
  171. Online checkin may not be available for all fares.
  172. </p>
  173. </div>
  174. <a href="#close" class="control close png_bg"></a>
  175. </div>
  176. </div>
  177. </div>
  178. </li>
  179. <li class="person6">
  180. <a href="#" class="person png_bg imgReplacement" title="Kate"><span>Kate</span></a>
  181. <div class="details png_bg">
  182. <div class="content png_bg">
  183. <div class="space">
  184. <div class="title imgReplacement"><span>quote goes here</span></div>
  185. <div class="text clearfix">
  186. <p class="p1">
  187. Saying <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> is just the beginning. We want to see you at least once a week and on special occasions. <a href="http://www.southwest.com/specialoffers/signup.html">Sign up for Click 'n Save e-mails</a> to get deals on flights, cars, hotels, and more delivered to your inbox.
  188. </p>
  189. </div>
  190. <a href="#close" class="control close png_bg"></a>
  191. </div>
  192. </div>
  193. </div>
  194. </li>
  195. <li class="person7">
  196. <a href="#" class="person png_bg imgReplacement" title="Randi"><span>Randi</span></a>
  197. <div class="details png_bg">
  198. <div class="content png_bg">
  199. <div class="space">
  200. <div class="title imgReplacement"><span>quote goes here</span></div>
  201. <div class="text clearfix">
  202. <p class="p1">
  203. Southwest loves you so much that we sponsor everything from the Red Rocks Amphitheatre to the Metro Sports Commission. Volunteering in Denver is one of our favorite things to do. Check out the difference we're making at the moment.
  204. </p>
  205. <p class="p2">
  206. <strong>Southwest Airlines Denver Rescue Mission</strong>
  207. <br/>
  208. A group of Denver Employees volunteer regularly at the Denver Rescue Mission preparing meals for the local homeless community.
  209. <br/><br/>
  210. Say <a class="yesLink btn_yes" href="/landing/den/entryform.html">Yes!</a> and we'll keep giving you all the attention you deserve, Denver.
  211. </p>
  212. </div>
  213. <a href="#close" class="control close png_bg"></a>
  214. </div>
  215. </div>
  216. </div>
  217. </li>
  218. </ul>
  219. </div>
  220. </div>
  221.  
  222. </span>
  223.  
  224. <script>
  225. $( function(){
  226.  
  227. /**==VARS==**/
  228. //Carousel
  229. var $carousel = $('.carousel');
  230. var $window = $carousel.find('.window');
  231. var $scene = $carousel.find('.scene');
  232. var $btn_controls = $carousel.find('.control');
  233. var $peopleTargets = $carousel.find('.person');
  234. var $btn_next = $carousel.find('.next');
  235. var $btn_prev = $carousel.find('.prev');
  236. var curSlide = 1;
  237. var numSlides = $carousel.find('li').length;
  238.  
  239. /**==IE detection==**/
  240. if ($.browser.msie && $.browser.version == "6.0") {
  241. //ie 6 actions
  242. $.fx.off = true;
  243. DD_belatedPNG.fix('#carousel_png .png_bg, #carousel_png .imgReplacement');
  244. }else if ($.browser.msie) {
  245. //other IE browsers than IE6
  246. }else {
  247. //standards browsers' actions
  248. $('.control').blend({speed: 200,top: true});
  249. }
  250.  
  251. /**=== jquery functions ===**/
  252.  
  253. //set the current slide and check if within bounderies
  254. setCurrentSlide = function( cur ){
  255.  
  256. //checks for the beginning of the carousel
  257. if (cur <= 1) {
  258. $.log("your at the beginning");
  259. $btn_prev.hide();
  260. curSlide = 1;
  261. } else {
  262. $btn_prev.show();
  263. curSlide = cur;
  264. }
  265.  
  266. //check if the details are not showing, and if we have reached the last element - 2
  267. if( cur+2 >= numSlides && $carousel.hasClass("view_collapsed")) {
  268. $.log("setCurrentSlide::if( cur+2 >= numSlides && $carousel.hasClass('view_collapsed'))");
  269. $btn_next.hide();
  270. curSlide = cur;
  271. } else if(cur >= numSlides && $carousel.hasClass("view_expanded")){
  272. $.log("setCurrentSlide::else if(cur >= numSlides && $carousel.hasClass('view_expanded'))");
  273. $btn_next.hide();
  274. curSlide = numSlides;
  275. } else {
  276. curSlide = cur;
  277. $btn_next.show();
  278. }
  279.  
  280. //set current object in DOM
  281. $('.current').removeClass('current');
  282.  
  283. return $scene.find('li:eq('+(cur-1)+')').addClass('current').animatePerson();
  284.  
  285. }
  286.  
  287. // open targeted person's detail (like .show() for this project)
  288. jQuery.fn.animatePerson = function(){
  289. //cache elements
  290. var $personContainer = $(this);
  291. var $thisPerson = $personContainer.find(".person");
  292. var $details = $personContainer.find(".details");
  293. var detailWidth = 630;
  294.  
  295. //move to current person
  296. setTimeout( function(){
  297. $window.stop().scrollTo( $personContainer, 800, {queue:false});
  298. }, 200);
  299.  
  300. //check if details already are open
  301. if ( !$details.is(':visible') && $carousel.hasClass('view_expanded') ) {
  302.  
  303. $thisPerson.css({ 'margin': '0' });
  304.  
  305. //expand this scene's item and move the target to the left-most corner
  306. $personContainer.css({
  307. 'text-align':'left'
  308. }).animate({'width': 849}, { duration:200, queue:true });
  309.  
  310. //show the details
  311. setTimeout( function(){
  312. if ($.browser.msie) {
  313. $details.show();
  314. $details.animate({'width': detailWidth}, {duration:500});
  315.  
  316. setTimeout(function(){
  317. $details.find('.space').fadeIn(500);
  318. },400);
  319. } else {
  320. $details.css({'width': 60});
  321. $details.fadeIn(400, function(){
  322. setTimeout(function(){
  323. $details.animate({'width': detailWidth}, {queue:false});
  324.  
  325. setTimeout(function(){
  326. $details.find('.space').fadeIn(500);
  327. },400);
  328.  
  329. }, 200);
  330. });
  331. }
  332. }, 800);
  333.  
  334. }
  335. }
  336.  
  337. //close any expanded sections and scroll to the current item(like .hide() for this project)
  338. jQuery.fn.closeAll = function(){
  339. //cache elements
  340. var $personContainer = $(this).closest('li');
  341. var $thisPerson = $personContainer.find('.person')
  342. var $details = $personContainer.find(".details");
  343. $carousel.removeClass('view_expanded').addClass('view_collapsed');
  344.  
  345. //====FIRST HIDE ALL DETAILS FOR PEOPLE YOU ARENT CURRENTLY LOOKING AT
  346. //first hide all people text, then shrink the width down to 40px
  347. $carousel.find('.details .space').not( $details )
  348. .hide()
  349. .parent().parent().css({ 'width': 40, 'display': 'none' });
  350. $carousel.find('.person').not( $('.current').find('.person') )
  351. .find('.open').removeClass('open');
  352. $scene.find('li').not( $('.current') ).css({ 'width': 280 });
  353.  
  354. //move to the current person so we can see the close animation
  355. $window.scrollTo( $('.current') , 10 );
  356.  
  357. //====NOW ANIMATE THE PERSON YOU ARE LOOKING AT AND SCROLL TO THE PERSON
  358. //hide the details
  359. $details.find('.space').stop().show().fadeOut(500);
  360. $details.animate({ 'width': 40 }, {duration:500, queue:false});
  361.  
  362. currentIndex = $scene.find('ul li').index( $scene.find('.current') );
  363. $.log("current INDEX: ");
  364. $.log( currentIndex );
  365.  
  366. setTimeout( function(){
  367. $details.hide();
  368. $carousel.find('.current .open').removeClass('open');
  369. //reset the containers widths
  370. $scene.find('.current').animate({
  371. 'width': 280
  372. }, {
  373. duration:500,
  374. queue:true
  375. });
  376.  
  377. //reset the text alignment and scroll to the element
  378. setTimeout( function(){
  379. $scene.find('li').css({'text-align':'center'});
  380.  
  381. if ( currentIndex > 4 ) {
  382. $.log("special close case");
  383. setCurrentSlide( 5 );
  384. $btn_next.hide();
  385. } else {
  386. setTimeout( function(){
  387. setCurrentSlide( $scene.find('ul li').index( $('.current') ) + 1 );
  388. },200);
  389. }
  390. }, 300);
  391. }, 300);
  392. }
  393.  
  394. /**== Actions for clicking the a control button
  395. * Action Taken on click: depends on the anchor link
  396. ==**/
  397. $btn_controls.live("click", function(e){
  398.  
  399. //perform actions for specific button click(next,prev,close)
  400. if( $(this).hasClass('next') ){
  401. $.log("$btn_controls click::next");
  402. setCurrentSlide( curSlide + 1 );
  403. }else if( $(this).hasClass('prev') ){
  404. $.log("$btn_controls click::prev");
  405. setCurrentSlide( curSlide - 1 );
  406. }else if( $(this).hasClass('close') ) {
  407. $.log("$btn_controls click::close");
  408. $carousel.closeAll();
  409. return false;
  410. }
  411.  
  412. /* If the details have been expanded on any container, expand the details
  413. * of the next object and scroll to it, otherwise just scroll to the element
  414. */
  415. if( $carousel.hasClass('view_expanded') ){
  416. $carousel.find('.current .person').trigger("click");
  417. }else{
  418. //$window.stop().scrollTo( '.current', 800 );
  419. }
  420.  
  421. return false;
  422.  
  423. });
  424.  
  425.  
  426. /**==
  427. * Actions performed when clicking on a person's image(or '.person')
  428. ==**/
  429. $peopleTargets.live('click', function(e){
  430. //indicate to the carousel that one of the sections is open
  431. $carousel.addClass('view_expanded').removeClass('view_collapsed');
  432. //animate the opening of a person's details
  433. $(this).addClass('open clicked');
  434.  
  435. cur = $scene.find('ul li').index( $(this).parent() ) + 1;
  436. $.log("$peopleTargets click: cur = "+cur)
  437. setCurrentSlide( cur );
  438.  
  439. //do not follow anchor
  440. return false;
  441. });
  442.  
  443. /* Actions for clicking the yes button
  444. * Action Taken on click: show the sign-up form
  445. */
  446. $('#sw_denver_content .btn_yes').openDOMWindow({
  447. borderSize:0,
  448. borderColor:'transparent',
  449. height:544,
  450. width:827,
  451. positionType:'absolute',
  452. positionTop:100,
  453. positionLeft:($(window).width()/2 - 408),
  454. eventType:'click',
  455. loader:1,
  456. loaderImagePath:'/landing/den/images/sw-denver/loading.gif',
  457. loaderHeight:16,
  458. loaderWidth:17,
  459. windowPadding:0,
  460. windowSource:'ajax',
  461. windowHTTPType:'get'
  462. });
  463.  
  464. });
  465. </script>
  466.