?
Solved

JavaScript variable link not working

Posted on 2009-12-27
3
Medium Priority
?
469 Views
Last Modified: 2012-05-08
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

0
Comment
Question by:Qsorb
  • 2
3 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 26128659
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

0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 26128702
.
<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')>
 
 mycarousel_itemList[mycarousel_itemList.length]={"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'>

 mycarousel_pageList[mycarousel_pageList.length]={"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

0
 

Author Comment

by:Qsorb
ID: 26128804
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

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question