asked on

JavaScript variable link not working

An image slider or carousel has links on each image but the anchor link (item.pageurl) I created isn't working. So I need help to show how to make that link work with JavaScript, using my code or something different if you like. I'm a beginner with JavaScript. So, show me how to make that item.pageurl work for each image without changing item.url. As you can see with my snippet, pageurl pageurl is a cf variable from a cfoutput query.

I need this ASAP!

function mycarousel_getItemHTML(item)
{
return '<a href="' + item.pageurl + '"><img src="' + item.url + '" /></a>';
};

<LINK rel=stylesheet type=text/css href="/c9/c9_files/style.css">
<SCRIPT type=text/javascript src="/c9/c9_files/jquery-1.2.3.pack.js"></SCRIPT>
<SCRIPT type=text/javascript src="/c9/c9_files/jquery.jcarousel.pack.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="/c9/c9_files/jquery.jcarousel.css">
<LINK rel=stylesheet type=text/css href="/c9/c9_files/skin.css">

<cfquery name="GetStory" datasource="daily-news">
  select *
  from story
  where catid = 2
  order by id desc
</cfquery>

<SCRIPT type=text/javascript>

var mycarousel_itemList = [

<cfoutput query='GetStory'>
 <cfset ImageURL = Replacenocase(GetStory.local_url, '.htm', '.jpg', 'ALL')>
 
 {url: '/news/story/i/#ImageURL#'},
 
</cfoutput> 
 
];


// Below I attepted to set pageurl variable to be used in the anchor image link.
// pageurl should be equal to:  /news/story/y/ plus the cf variable LOCAL_URL.
// I must not have any idea how to set and display a JavaScript variable.
var mycarousel_pageList = [

<cfoutput query='GetStory'>

 {pageurl: '/news/story/y/#LOCAL_URL#'},
 
</cfoutput> 
 
];




function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};





function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
};

// item.pageurl is the problem. The item.url is correct.
function mycarousel_getItemHTML(item)
{
    return '<a href="' + item.pageurl + '"><img src="' + item.url + '" /></a>';
};




jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        size: mycarousel_itemList.length,		
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});

</SCRIPT>
<DIV id=wrap>
    <UL id=mycarousel class=jcarousel-skin-ie7>
        <!-- The content will be dynamically loaded in here -->
    </UL>
</DIV>

Open in new window

hielo

If I am understanding what this CF code is doing:

var mycarousel_itemList = [

<cfoutput query='GetStory'>
 <cfset ImageURL = Replacenocase(GetStory.local_url, '.htm', '.jpg', 'ALL')>
 
 {url: '/news/story/i/#ImageURL#'},
 
</cfoutput> 
 
];

the browser ends up receiving something like:
var mycarousel_itemList = [
	{url: '/news/story/i/...'},
	{url: '/news/story/i/...'}, 
];

notice that trailing comma? Some browsers will see it as an error and will halt further processing. The same problem with:
var mycarousel_pageList = [...];

try changing that to:
var mycarousel_itemList = [];

<cfoutput query='GetStory'>
	<cfset ImageURL = Replacenocase(GetStory.local_url, '.htm', '.jpg', 'ALL')>
 
      mycarousel_itemList[mycarousel_itemList.length] = {url: '/news/story/i/#ImageURL#'};
 
</cfoutput>

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Qsorb

ASKER

I decided to read a bit about JavaScript and found the replace function. So all I had to do was add this JavaScript replace code shown in my snippet, which works just as I want.

So none of your suggestions help. I'm not sure what you were doing on your second post because all you left was the code and that was confusing. But I'm giving you the points because at least you answered my question.

function mycarousel_getItemHTML(item)
{
pageurl=item.url.replace("/i/","/y/");
pageurl=pageurl.replace(".jpg",".htm");

 return '<a href="' + pageurl + '"><img src="' + item.url + '" width="100" height="80" alt="' + item.url + '" /></a>';
};

Open in new window