Minute Maid Heartwise Where To Buy

version of scriptaculous AJAX - Pictures

Back from a long weekend of August 15, it is time to expose the souvenir photos. The goal is not to present a photo management application but rather to present two solutions that I find aesthetic AJAX and very easy to integrate with Lotus Domino. The first solution presented in this article presents the photos as a banner with fade transition effect and the possibility of adding a title, description and a link. The second solution will be presented in the next section. She can open the photos from thumbnails as a modal dialog box. This effect is particularly used on zoomr .

Smooth Slideshow by Jonathan Schemoul

The library's Smooth SlideShow JonDesign quickly create a banner with fade effect as found many already in Flash. This Library based on prototype.js and moo.fx. The whole weighs 21.6 kb which seems very reasonable especially if one uses these libraries for other uses on the site. For comparison, dewslider.swf an excellent equivalent in flash weighs 30.4 kb. However, knew nothing about Flash, I would not dare to advance arguments for or against any of these solutions. The choice of this library is primarily motivated by the primary goal of this blog, presenting solutions for Lotus Domino AJAX.

library installation

To use bilbiothèque must first download the package available on the introductory page of the library. Once the file is decompressed, add the javascript files and stylesheets in the shared resources of the Lotus Notes database. Files to add are:

• moo.fx.js
• moo.fx.pack.js
• protoype.lite.js
• showcase.slideshow.js
• timed.slideshow.js
• jd.slideshow. css

If you already use prototype.js, needless to add prototype.lite.js.

Using the driver DLL

As described in the documentation, you must declare

1. and javascript libraries stylesheet
2. report images to present
3. customize the size of the display area
4. define the display area on the page

statement to present images is done through an array declared javascript form:

  mySlideData [countArticle + +] = new Array (
 'image1.jpg', 
 'article1.html' 
 'Item 1 Title', 
 'Item 1 Description' 
)  

Integration with Lotus Notes

To facilitate the updating of files, I would pass by a mask for managing photos display. This mask is defined with the following fields:

• Title: free text field
  
• Link: Free text field
  
• Description: Free text field
  
• Photo: rich text field

Once the mask created, it remains to define a view "Photos". To facilitate my task, to present the JavaScript code directly to integrate into my page. The column formula is:

  "mySlideData [countArticle + +] = new Array (" 
 + "0 /" + @ Text (@ DocumentUniqueID) + "/ $ file /" 
 + @ Subset (@ AttachmentNames; 1) + "', "
 + Link +" ', "
 + Title +"' "+ description + 
 "');"  

Do not forget to sort the first column in order to be able to extract data with @ DbColumn.

To create my web page, I'll go through a Notes page, but can also integrate it into a mask.

As content as HTML must integrate javascript libraries, add an event onload to launch the band to open the page and then set to display images from the views previously created and then set the options to define style headband size, either:

  Photos: Photos ("":"";"";" DbColumn = @ "1); 
 @ If (@ IsError (val);"; 
 "\u0026lt;script src = \\ "prototype.lite.js \\" type = \\ "text / javascript \\"> \u0026lt;/ script> 
 \u0026lt;script src = \\ "moo.fx.js \\" type = \\ "text / javascript \\" > \u0026lt;/ script> \u0026lt;script 
 src=\\"moo.fx.pack.js\\" type=\\"text/javascript\\"> \u0026lt;/ script> 
 \u0026lt;script src = \\ "timed. slideshow.js \\ "type = \\" text / javascript \\ "> \u0026lt;/ script> 
 \u0026lt;link rel = \\ "stylesheet \\" href = \\ "jd.slideshow.css \\" 
 type = 'text / css \\ "media = \\" screenshot \\ "/> 
 
 \u0026lt;script type =' text / javascript \\ "> 
 function addLoadEvent (func) {
 was oldonload = window.onload; 
 if (typeof window.onload! = 'function') {window.onload = func 
;} else {
 
 window.onload = function () {
 oldonload (); 
 func (); 
} 
} 
} 
 function start slideshow () {
 initSlideShow ($ ('MySlideShow'), mySlideData); 
} 
 
 countArticle = 0; 
 was mySlideData = new Array (); "
 + @ Implode (Photos) + 
 "addLoadEvent (startSlideshow) \u0026lt;/ script> 
 \u0026lt;style> 
 # mySlideshow 
 {width: 400px! Important; 
 height: 200px! Important;} 
 
 \u0026lt;/ style>" )  

It only remains to indicate where on the page displaying the banner by adding HTML as text relay:

  \u0026lt;div id="mySlideshow"> \u0026lt;/ div>  

It's over, here is a sample output with some photos Gulf of Morbihan.