jCarousel Lite Index Question

JavaScript
1

Using jQuery lite to rotate a series of playing card like forms that drill down to another level in the next page.
3 “cards” show at any one time.

Can anyone think of a way to assign the index value of the card that’s in the first position whenever you click any card (form) on the page so I can carry that value over to the next page?

Say I’ve rotated through a bit, and card number 4 is currently first. However, I click on card 6. I need to let the next page know that 4 was the first card so I can assign a start position.

I know how to statically assign a start position:


btnNext: ".next",
btnPrev: ".prev",
start: 4

… but how would I FIND that value as I rotate through cards, and assign it to a form variable.

This is in a loop (Coldfusion) on the page below. Each form is the “Card” and there’s currently 15 or 20 of them. Need to assign whichever card it first as the value of “firstCARD”.


    <form name="form#getCARDS.card_id#" action="category.cfm" method="post" class="theFORM" id="frm#getCARDS.card_id#">
     <button id="cbut#getCARDS.card_id#">
       <h3>#getCARDS.card_title#</h3>
       <cfif len(getCARDS.card_smtext)><p>#getCARDS.card_smtext#<span class="morec"> ...MORE</span></p></cfif>
     </button>
     <input type="hidden" name="thisCARD" value="#getCARDS.card_id#" />
     <input type="hidden" name="firstCARD" value="" />
    </form>
2

While driving around last night I came up with the idea of use “afterEnd” to set a cookie, and then set the “start” value as that of the cookie. Considering there are a number of pages involved, and the client wants the carousel to stay PUT wherever you last left it whenever you return to the page(s) with the carousel on it, this should be my solution. Once I get this to hopefully work I’ll post the code back.

3

OK, I’m sure there’s a more compact way to do this, but since I’m way more comfortable moving Coldfusion variables around than working with a lot of javascript, I’ve got a combination of the two that seems to be working:

First, here’s the script controlling the carousel. "AfterEnd is setting “index” to the value of the current “first position” item in the carousel, and assigning that to a cookie.


<script>
  $(function() {
      $("#carousel").jCarouselLite({
        start: <cfoutput>#startHERE#</cfoutput>,
		btnNext: ".next",
        btnPrev: ".prev",
		start: <cfoutput>#cookie.carouselSTART#</cfoutput>,
		afterEnd: function(a){
          var index = $(a[0]).index();
		  document.cookie = "carouselSTART=" + index + ";";
		  // alert('Test Index:' + index);
          }
      });
  });
</script>

For some reason, “afterEND” is returning a number that’s always 3 higher than the actual number. No idea why. So, at the top of the page, I’m setting my cookie to “0” (the first position by default), and than any other number that comes up, subtracting 3 from it. Doing this in Coldfusion as it was just quicker than figuring out the javaScript.


<cfif IsDefined("Cookie.carouselSTART") is False><cfcookie name = "carouselSTART" value = "0" expires = "0"></cfif>

<cfif IsDefined("Cookie.carouselSTART") and #Cookie.carouselSTART# GT 3 >
   <cfset bacVAR = #Cookie.carouselSTART# - 3 />
   <cfcookie name = "carouselSTART" value = "#bacVAR#" expires = "0">
</cfif>

Down inside the page itself, I’m rotating what looks like modified playing cards. Each is actually a form that submits off to a detail page. In addition to keeping up with which card is always in the “first” position, I always need to know what card has been clicked on on well. The current card always has a drop shadow on the headline text. Clicking a major “Card” brings up a second carousel of sub categories.


  <ul><cfset startNUM = 0 />
   <cfoutput query="getCARDS">
   <cfif #getCARDS.card_id# eq #form.thisCARD#>
     <cfset curCARD = "text-shadow: 1px 1px 15px rgba(0, 0, 0, 1);" />
     <cfelse>
      <cfset curCARD = "" />
     </cfif>
   <li id="card_#getCARDS.card_id#" style="background:url(img/#getCARDS.card_image#) top center no-repeat;">
    <form name="form#getCARDS.card_id#" action="category.cfm" method="post" class="theFORM" id="frm#getCARDS.card_id#">
     <button id="cbut#getCARDS.card_id#">
       <h3 style="#curCARD#">#getCARDS.card_title#</h3>
       <cfif len(getCARDS.card_smtext)><p>#getCARDS.card_smtext#<span class="morec"> ...MORE</span></p></cfif>
     </button>
     <input type="hidden" name="thisCARD" value="#getCARDS.card_id#" />
     <input type="hidden" name="firstCARD" value="#startNUM#" />
    </form>
   </li>
   <cfset startNUM = #startNUM# + 1 />
   </cfoutput>
  </ul>

Preliminary test seem to be OK.