JQuery Cycle Carousel (JQCC) - Seasonal Photos

Mar 8, 2012 at 2:18 PM

Hello..

We are currently using a custom created module which allows us to rotate images.  This looks at the current date and if it falls within say the first day of spring, will display spring image.; first day of summer, display summer photos, first day of winter, display winter photos, July 4th will display fireworks photos.  See example JS code below.

The bad is that if we need to add/remove images, the module needs to be manually edited to add the new images, etc.  For our web-updaters, they're not really programmers and it would not be beneficial to have them update it.  With the JQCC module, we could just point to a folder and it rotates those images.

We could use the DNN effective and expiration dates for multiple JQCC modules, but through experience, the web-updaters have issues using this DNN function and also yearly, we'd have to update the effective/expiration dates.

If there was a way to get within the setting page, enable the ability to put in month/day effective/expiration dates and have them use a certain folder during this time, I think it'd be great if it could be accomplished.

Thanks.. -Jeff

 ;(function(){
var d = new Date(),
m = d.getMonth(),
dy = d.getDate();
if (m < 2 || m == 2 && dy < 20)
     fadeshow.quarter = 'winter';
else if (m < 5 || m == 5 && dy < 21)
     fadeshow.quarter = 'spring';
else if (m == 6 && dy >= 1 && dy < 7)
     fadeshow.quarter = 'july4th';
else if (m < 8 || m == 8 && dy < 22)
     fadeshow.quarter = 'summer';
else if (m < 11 || m == 11 && dy < 21)
     fadeshow.quarter = 'fall';
else fadeshow.quarter = 'winter';})();

var fadeimages=new Array()

if (fadeshow.quarter == 'spring'){
     fadeimages[0]=[fadeshow.quarter+"/spring1.jpg", "", ""] //plain image syntax
}
else if (fadeshow.quarter == 'july4th'){
     fadeimages[0]=[fadeshow.quarter+"/july4th1.jpg", "", ""] //plain image syntax
}
else if (fadeshow.quarter == 'fall'){
     fadeimages[0]=[fadeshow.quarter+"/fall1.jpg", "", ""] //plain image syntax
}
else if (fadeshow.quarter == 'winter'){
     fadeimages[0]=[fadeshow.quarter+"/winter1.jpg", "", ""] //plain image syntax
};

Mar 9, 2012 at 2:33 PM

Just FYI, I'm working on updating the module to enable this functionality.  I'll keep things posted.

Thanks.. -Jeff

 

Mar 9, 2012 at 2:52 PM

Looking forward to seeing your improvements, I could definitely use them.

Mar 9, 2012 at 9:41 PM
Steven_T wrote:

Looking forward to seeing your improvements, I could definitely use them.

Hello..  Ok, I've completed this and uploaded to be evaluated.  It needs to be OK'd though; I think.

If you want to try this version on your own, e-mail me at spook_man (at) hotmail (dot) com and I'll forward anyone interested in testing this.

Our DNN development box is running DNN PE 6.1.3, using .NET 4 and did a test of first installing the current version 1.0.0, configuring this module on a page and then upgraded to version 1.1.1 (this is the version I labeled my changes; for 1.1.0 I forgot about the language sub-folders in the code; oops, needed to add them in).  My original configuration settings transferred over and the new version settings were showing as they should; this is good.

Changes are mainly the seasonal capabilities (spring, summer, july 4th, fall and winter rotating images folder locations).  I used Regex for these month/dates so there can't be, for example, a February 31st (02/31) entered for a date.  In other words, it knows how many days there are in the different months; e.g. no April 31st as well.  When entering month and dates, ensure to keep the leading zero; e.g. 01 for January, 02 for February, 03 for March, etc.

The default month/dates for the different seasons are as follows:
Spring:  March 20th - June 20th (03/20 - 06/20)
Summer: June 21st - September 21st (06/21 - 09/21)
July 4th: July 1st - July 6th (07/01 - 07/06)
Fall:  September 22nd - December 21st (09/22 - 12/21)
Winter:  December 22nd - March 19th (12/22 - 03/19)

I also changed the module to use the updated the AJAX CDN jquery.cycle; from version 2.88 to version 2.99.

Another of the default parameters I added to the system is the default ability of the system to randomize the images; you'll now see "random: 1" in the options window.

I also added the ability for you to set the width and height of the image DIV which displays the images; if nothing is entered, then these are set to AUTO.  So say you have rotating images which are 214x200 (HxW), you can set the DIV to 224x210 and it give the image DIV some padding.  NOTE: it takes your border and frame width into account as well.  So, if you set the DIV size to 224x210 and you have a border and frame width set to 2, the end results of the image DIV will be 228x214.

I noticed that sometimes when set to AUTO, other modules below this carousel module will be loaded first and the carousel module will have modules below it over-layed on top of it.  Setting a height to this resolves this issue.

And finally, I left the trouble-shooting labels in place.  So if something isn't switching properly or it doesn't appear to be working properly, within the carousel.ascx.vb file on line 50, the lbl.Testing label is REMmed out to have it's visiblity set to true.  If you remove the single-quote ('), you should then see the information concerning the dates being used, etc.

Also on this page on line 45, you can manually set the Current month and date; CurrentMonthDate = "03/19".  So if you need to test what certain rotating images are going to be used depending on the system date, just un-REM this line, remove the single quote (') and enter the month and date as you see fit.  On a browser refresh, the module will use this as it's current month and date instead of the system time.  Again, good for trouble-shooting or testing of different rotating image folders.

Hope this will help others out.  Thanks.. -Jeff

Mar 9, 2012 at 9:44 PM
spook_man wrote:
Steven_T wrote:

Looking forward to seeing your improvements, I could definitely use them.

Hello..  Ok, I've completed this and uploaded to be evaluated.  It needs to be OK'd though; I think.

If you want to try this version on your own, e-mail me at spook_man (at) hotmail (dot) com and I'll forward anyone interested in testing this.

Hope this will help others out.  Thanks.. -Jeff

I just checked in another browser which isn't logged into Codeplex and my uploads are listed; http://jqcarousel.codeplex.com/SourceControl/list/patches

Use the latest version for testing; 11703.  This is version 01.01.01 which I made as far as version number.  Thanks.. -Jeff

Mar 9, 2012 at 10:06 PM
spook_man wrote:
spook_man wrote:
Steven_T wrote:

Looking forward to seeing your improvements, I could definitely use them.

Hello..  Ok, I've completed this and uploaded to be evaluated.  It needs to be OK'd though; I think.

If you want to try this version on your own, e-mail me at spook_man (at) hotmail (dot) com and I'll forward anyone interested in testing this.

Hope this will help others out.  Thanks.. -Jeff

I just checked in another browser which isn't logged into Codeplex and my uploads are listed; http://jqcarousel.codeplex.com/SourceControl/list/patches

Use the latest version for testing; 11703.  This is version 01.01.01 which I made as far as version number.  Thanks.. -Jeff

Of course, about ready to leave and tested one last time and it errored out.  Fixed issues and uploaded patch.  Use 11704.    This too will show up as version 01.01.01.  Thanks.. -Jeff

Mar 12, 2012 at 4:52 PM

Hello..

I made some changes to the module.

Fixed a bug with the Spring rotating images. When Spring Equinox started, the Spring rotating images were not being displayed.  This has been fixed.

Added debugging capabilities via a checkbox. When checked, it'll display debugging information below the rotating images.

Added custom date capabilities. When the custom date checkbox is checked, the date within the custom date text field is used for testing the seasonal rotating images. No code/page changes required now; done within the settings page.

Download and install path 11734.

If there are any issues, please let me know.  Thanks.. -Jeff

Mar 12, 2012 at 5:18 PM
Edited Mar 12, 2012 at 5:18 PM

Jeff,

Just wanted to thank you, I can't tell you how much I appreciate all your enhancements!  

I was the first person to review this module back in Feb 2011 and I was really hoping it would evolve.  Thanks to you it is!

Steven.

Mar 12, 2012 at 6:03 PM

Thank you for the compliment.  I'd like to learn more DNN module programming and this one seemed like a good one to start with getting configured and customized for what we would use it for within our DNN website.  It's actually not too bad; mainly vb.net programming with DNN special calls in the pages.

But as I work through the code, I keep finding little quirks and things that I need to change.  So, I've updated AGAIN to version 01.01.04; download 11739.  This covers more costmetic changes (debugging info) more than anything.  ha-ha..  It appears to be pretty stable.

Things which I've thought about updating are a compare validation between the different seasonal dates. So if 06/21 is entered for the end of spring, you can't enter 06/19 for the start of summer, but 06/22 would be fine.

Also, an ellipsis which when selected, would open the root directory of your portal so you'll be able to select the folder for which the rotating images are grabbed from.  This way, you don't have to manually enter the folder structure in.

I'll keep you posted and thanks again.  -Jeff

Mar 12, 2012 at 6:49 PM

Bug Fix: 11741

Testing with the the programmers found and error.  Fixed in v01.01.05.

Mar 15, 2012 at 2:04 PM

Updated the module once again.  You can find it here:  11762  Please test and let me know if you there are any issues.  Thanks.. -Jeff

Version 01.01.06 Changes:
Image Width/Height can be set. If rotating images themselves have their width & height set to 200x214, you can configure the module to display them as 100x107, etc.

Separate Top/Right/Bottom/Left Border Widths and separate Top/Right/Bottom/Left Frame Widths can be entered.

Padding around the rotating images can be set. Good for putting padding above, below, or to the right or left of the actual rotating images module.

Mar 15, 2012 at 3:54 PM
spook_man wrote:

Updated the module once again.  You can find it here:  11762  Please test and let me know if you there are any issues.  Thanks.. -Jeff

Version 01.01.06 Changes:
Image Width/Height can be set. If rotating images themselves have their width & height set to 200x214, you can configure the module to display them as 100x107, etc.

Separate Top/Right/Bottom/Left Border Widths and separate Top/Right/Bottom/Left Frame Widths can be entered.

Padding around the rotating images can be set. Good for putting padding above, below, or to the right or left of the actual rotating images module.

Forgot to add that if you set the border/frame colors to zero ('0'), then the settings for the color is setup to transparent.

So if you need the background to come through the frame background, this is how you accomplish this.

Thanks.. -Jeff

Mar 16, 2012 at 4:23 PM

I've started a new discussion HERE to easier track updates/changes I've made to the module.

Thanks.. -Jeff