Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDevelopment and...Development and...DNN Platform (o...DNN Platform (o...[jQuery] Cycle plugin[jQuery] Cycle plugin
Previous
 
Next
New Post
2/13/2009 10:39 AM
 

I want to add the jQuery Cycle Plugin to the Text/HTML module but it won't work...

Default.aspx
I've added this in the header:
<script type="text/javascript" src="/scripts/cycle.js"></script>
And added a folder with the correct files in the root of my site...

Text/HTML module
<script type="text/javascript"> $('#pictures').cycle('fade');</script> <div id="pictures"><img height="230" width="795" src="/Portals/0/ekuline/imageRotator/home/Bubbels.jpg" alt="" /><img height="230" width="795" src="/Portals/0/ekuline/imageRotator/home/Train.jpg" alt="" /></div>

This is the code I entered in the Text/HTML module.
The Firefox Webdeveloper Toolbar-plugin gives the following error:
Error: $("#pictures").cycle is not a function
Source: http://dev.ekuline.de/Default.aspx

 

What's the best way to implement this?
In the Host Settings I checked all the three checkboxes concerning jQuery...

 
New Post
2/18/2009 9:45 AM
 

 Hey thomas,

First, make sure you've also added the core jQuery script (I'm guessing you have, but just in case, as cycle is a plugin to the core library).

Then, I'd make sure that both scripts are loading properly. You can verify this by looking at the page source and actually following the links to the JavaScript files to make sure they are linked/included properly.

Once you have verified that, I would suggest also using jQuery's noConflict and using 'jQuery' instead of '$'. This is a good strategy in the DNN world because there is already non-jQuery JavaScript in play. Read more about using jQuery with other libraries.

Also, if you are using the DNN Menu and DotNetNuke 4.x, you will see conflicts between the JavaScript it uses and jQuery. If need be, you can manually load the jQuery file (in code) and make sure that it is added before the DNN Menu's JavaScript is added. There is a utility method you can re-purpose on this jQuery & DotNetNuke downloads page for a recent presentation I gave.

Hope that helps,
Take care,

Ian


Software Engineer
Co-Founder, dnnGallery
Stack Overflow: Ian Robinson
Twitter: @irobinson
Linked In: Ian Robinson
 
New Post
2/26/2009 10:03 AM
 

Thanks Ian!
It works... partially...

I added the following JavaScript so my images are invisible while they are loading... else all images are shown while loading.

$j(window).load(function() {
     $j("#loading").hide();
     $j("#picture").show();
}); 

This piece of code works BUT when I change the language of my site, the images aren't visible. I found out that the code above doesn't fire when changing the language... How can I solve this?

 
Previous
 
Next
HomeHomeDevelopment and...Development and...DNN Platform (o...DNN Platform (o...[jQuery] Cycle plugin[jQuery] Cycle plugin


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out