+/-

±Donations

Donate with PayPal!
Help support Pro_News and become a member of our Sponsors Group
The tip jar is at PayPal, but does not require a PayPal account

±Select Language

±Stop Software Patents

±Link this Site


http://layingback.net

Check our QR links

±30 Years of GNU

[ Celebrate 30 years of GNU! ]

Latest News

Latest News

Demo of the "Featured Content" Slider

 
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!



 


Javascript required in order to display content

Please enable javascript in your browser
 
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.
 
Be First to Leave a Comment Comment   Link  QR  Share this Printer Friendly Format  facebook   google+   linkedin   twitthis  
 
aim   ask   bebo   blinklist   blogger   bloglines   blogmarks   blogospherenews   buzz   bx   care2   co.mments   current   dealspl.us   del.icio.us   designfloat   designmoo   digg   diigo   dzone   fark   faves   folkd   friendfeed   fresqui   funp   furl   google   google buzz   kickit   kirtsy   live   magnolia   meneame   mister-wong   mixx   muti   myspace   n4g   netvibes   netvouz   newstrust   newsvine   nowpublic   oknotizie   ping   propeller   pownce   propeller   reddit   shoutit   shoutout   simpy   slashdot   sphere   sphinn   spurl   squidoo   stumble   subbmitt   tagza   tailrank   technorati   tumblr   twackle   twine   twitthis   webnews   wikio   wink   xanga   yahoomyweb   yigg