Toggle Content

Donations

Aforo, los... $ 40.00
renfroeinc $ 25.00
heliown $ 20.00
Noair $ 20.00
jvj1961 $ 10.00
atleg $ 20.00
rosbif $ 20.00
Iscariah $ 70.00
Scott $ 25.00
Scott $ 25.00
Scott $ 25.00
dantien $ 20.00
fishingfan $ 50.10
Scott $ 20.00
Brian Kent $ 20.00
Hecter $ 20.00

Select Language

عربي English Français Deutsch Bahasa Indonesia Norsk Espanõl Svensk
Select to preview a Pro_News translation

Stop Software Patents

stopsoftwarepatents.eu petition banner

Recommended ISP

Latest News

Demo of the "Featured Content" Slider

Posted by: layingback on Thursday, October 22, 2009 (11:58:20)   (582 Reads)
 
Featured Content Slider Final Version
Featured Content Slider Final Version

A screen shot of the final version of the (future) Featured Content Slider is on the left, but you can test out a live version in the demo below. (Click read more to view.) This Slider was created by simply selecting a Photo Album, as previously, and using a brand new template. No changes to the Submit Article user interface at all. Now, instead of the Photo Album images appearing as separate images on the page as before, they appear in a single Slider. No formating or anything else special for the submitter to do!

The Featured Content Scroller uses the most complex of Dynamic Drive's 3 options, the so called "markup" mode so that icons of the individual images can be used in place of numbers or text links. These are a lot of work to set up, especially for 30+ images!!! But of course Pro_News does all the heavy lifting for you.

The intermediate size Photo Gallery image is used as the large image display. The icons are the smallest Photo Gallery images further reduced to quarter size in the browser. So there is no image manipulation overhead.

In addition I've taught myself a little javascript and added a few extras. The full list of interactions now supported are listed below:
  • Images rotate into the large image automatically
  • A dark red border around an image icon indicates currently displayed image
  • Move the mouse over an icon image to bring it up immediately as the large image
  • Click on the large image, or on an image icon, to pop up the full sized image
  • Move mouse onto the large image to pause image rotation, releases when you move mouse back out
  • Click on Next / Previous buttons to move the large displayed image forward / backward one image
  • Mouse over the Next / Previous buttons to scroll the list of visible image icons right / left
  • Next / Previous buttons dim when list of visible image icons is fully right / left
  • Hold down Shift key when moving mouse over Next / Previous buttons to slide icons fully right / left.

Unfortunately to make it work this well, I did in the end need to make a few simple changes to the Pro_News code. So this FCS will not be available until the next release of Pro_News. But while I was in there I also increased the number of images supported - for this new index2fcs template at least - to 32.

 
Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version Featured Content Slider Final Version


 
 


ask   bebo   blinklist   bloglines   blogmarks   blogospherenews   co.mments   del.icio.us   digg   diigo   facebook   fark   friendfeed   furl   google   kirtsy   linkedin   magnolia   mister-wong
mixx   muti   myspace   netvouz   newsvine   propeller   reddit   simpy   slashdot   sphere   sphinn   spurl   squidoo   stumble   tagza   tailrank   technorati   tumblr   twitthis   wikio   wink   yahoomyweb   yahoobuzz