Using jquery image gallery - help!

Hello there :)
I'm having an issue with showing images in my jquery image gallery; it's taken me all day and it just won't work. I've tried to follow this tutorial using the latest version of pikachoose 3.0. http://apex-notes.blogspot.com/2008/12/build-image-gallery-using-apex.html
What I see is nothing but broken image links and no jquery image gallery at all. I suspect the problem is with this PL/SQL statement but I am not sure. I use BLOBs for images.
DECLARE
   CURSOR c1
   IS
      SELECT "IMAGE_ID"
        FROM "GAL_IMAGES";
BEGIN
   HTP.p ('<ul id="pikame">');
   FOR gallery_rec IN c1
   LOOP
      HTP.p
         ('<li>
                <img src="f?p=&APP_ID.:0:&SESSION.:APPLICATION_PROCESS=gallery:::F106_G_IMAGE_ID:'||gallery_rec.image_id||'" /></li>'
   END LOOP;
   HTP.p ('</ul>');
END; Please help?

Thank you for the reply Munky... yes I've included the jQuery in the header, and inspected it with firebug as well. I'm just not very good at interpreting the parameters oracle needs to display BLOB data through PL/SQL commands. No javascript errors, the images just refuse to show. Getting it on apex.oracle.com is tough (lots of stuff to export) but I'll get working on that right away. I'm on limited time too because my project is well overdue :/
Let me show you two screenshots for the time being: http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710612595.jpg and http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710740509.png
I wanted something like this - http://apex.oracle.com/pls/otn/f?p=25110:11:112222201005926 to happen in the 'gallery scroll' region. :/ He gets his to work, I don't know how though, since I followed every step of his blog meticulously.
Again, thanks so much for your reply.
-J

Similar Messages

FancyBox JQuery image gallery not working

Hi all
I'm working on a new portfolio site and I'm struggling to load the Fancybox.
I've used it before and it worked fine but this time all that is happening is the images are opening in a new window once clicked.
I'm also using another Javascript on my site and i'm wondering if i need to do something different, or if they are clashing?
This is my code:
<head>
<script type="text/javascript" src="Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>
<div id="content">
<div id="portfoliomain"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','Images/portfolioimages/latestwhite.jpg',1)"><img id="Image8" src="Images/portfolioimages/latest.jpg"></a></div>
<div id="workbox1" class="fancybox">
<a rel="group" href="Images/portfolioimages/mainwork/full/melissareed.jpg" title="Melissa Reed"><img src="Images/portfolioimages/mainwork/thumbs/melissareed.jpg" alt="image 1"/></a>
<a rel="group" href="Images/portfolioimages/mainwork/full/harperoffice.jpg" title="Harper Office"><img src="Images/portfolioimages/mainwork/thumbs/harperthumb.jpg" alt="image 2"/></a>
<a rel="group" href="Images/portfolioimages/mainwork/full/vowuserguide.jpg" title="Brochure"><img src="Images/portfolioimages/mainwork/thumbs/vowuserguidethumb.jpg" alt="image 3"/></a>
</div>
<script type="text/javascript">
/* Apply fancybox slideshow to 'group'*/
$("a.group").fancybox({
'transitionIn'     :     'elastic',
'transitionOut'     :     'elastic',
'speedIn'          :     600,
'speedOut'          :     200,
'overlayShow'     :     false
</script>
</body>
The CSS:
#content {
          max-width: 960px;
          width: 100%;
          margin-left: 32px;
          padding-bottom: 310px;
#portfoliomain {
margin-top: 50px;
#workbox1 {
          background-color: #CCC;
          width: 30%;
          height: 240px;
          border-right-width: 3%;
          border-right-style: solid;
          border-right-color: #FFF;
          float: left;
The site is live but this code is still being worked on so it's not online yet. The site is www.marieparkinson.co.uk
Thanks for any help,
Marie

marie_barnsley wrote:
I've been through and sorted the majority of the errors, apart from 3 that are flagging up to do with the Fancybox.
The 'rel' tag seems to be the issue and from reading online I've changed this to 'data' instead which seems to have fixed the errors.
However, the fancybox gallery still isn't working.
You must have the scripts linked up incorrectly.
Replace ALL of your script links with the ones below (once it's confirmed it's working you can go directly to the pages, download the scripts and save them locally)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/web.js?m=20100203"></script>
Amend the <script> at the foot of the page to as below:
<script type="text/javascript">
/* Apply fancybox slideshow to 'group'*/
$("a#group").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false
</script>
Then give the anchor tags in the 3 images an id="group" as below:
<a id="group" href="http://www.marieparkinson.co.uk/images/portfolio/full/harperoffice.jpg" title="Harper Office"><img src="http://www.marieparkinson.co.uk/images/portfolio/thumbs/harperthumb.jpg" alt="image 2"/></a>

Image gallery help

Hi!
I'm working on a flash website and I have thumbnails on the site that I want to, when clicked on open an image viewer. Now I have an image viewer already made I just need to get it to pop up once a thumbnail is clicked on. I want it so the image viewer pops up over the page being viewed. Not really looking to open a new browser window just the flash window if you follow?
Similar to the one on facebook where if you click the thumbnails at the top your page the image viewer opens up above the page you're viewing.
I'm using Cs5 and actionscript 2. If you know how to do this in as3 but not as2 please post anyway as I might understand from there what to do.
Any help is appreciated!

I think what you have to do is have the picture viewer start off the stage in the flash document. Then when the thumbnail, created as a button symbol, is clicked animate the viewer on to the stage or really move to a portion of the timeline where the viewer is on the stage . This can be done in the actions layer of the the timeline with the gotoAndStop code snippet in the Timeline Navigation section the code snippet panel. While it may not be the exact same thing, Abode TV has a tutorial called Flash in a Flash, it's for CS3 but the concepts still work, where he, a big bald white guy I can't remember his name, basically does what your talking about. It's a really good tutorial.

Problems with image gallery, Help !

Hi, i need this gallery to be seperated from the thumbnails it interact. I need the button to open the Xmlgallery1 instead of the Xmlgallery. In other words, i want to load a different image than the thumbnails shows. Ive already copied the xml gallery to seperate it but i cannot find a way to load another xmlgallery...
Here the code, it is a simple vertical slider:
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Loader;
var galleryXML1:XML;
var galleryXML:XML;
var xmlLoader:URLLoader;
var xmlLoader1:URLLoader;
var xmlRequest:URLRequest;
var xmlRequest1:URLRequest;
xmlLoader1 = new URLLoader();
xmlLoader = new URLLoader();
xmlRequest1 = new URLRequest('galleryXML1.xml');
xmlRequest = new URLRequest('galleryXML.xml');
var numOfImages:int;
var numOfImages1:int;
var currImage:int = 0;
var currImage1:int = 0;
var imageLoader:Loader;
var imageLoader1:Loader;
var imageRequest:URLRequest;
var imageRequest1:URLRequest;
imageLoader = new Loader();
imageLoader1 = new Loader();
var imagesList:Array = new Array();
var imagesList1:Array = new Array();
var loadedImages:Array = new Array();
var loadedImages1:Array = new Array();
xmlLoader.load(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE,onComplete);
function onComplete(e:Event):void
          galleryXML = new XML(xmlLoader.data);
          numOfImages = galleryXML.photo.length();
          var i:int = numOfImages;
          while(i--)
                    imagesList.push(String(galleryXML.photo[i].url));
          startLoading();
          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadNext);
function startLoading():void{
          imageRequest = new URLRequest(imagesList[currImage]);
          imageLoader.load(imageRequest);
function loadNext(e:Event):void
          if(currImage == numOfImages-1)
                    loadedImages.push(imageLoader.content);
                    imageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadNext);
                    var i:int = galleryXML.photo.length();
                    container = new Sprite();
                    while(i--)
                              var rect:Bitmap = loadedImages[i];
                              var bitmapCont:Sprite = new Sprite();
                              bitmapCont.addChild(rect);
                              container.addChild(bitmapCont);
                              bitmapCont.y = i * 105;
                              bitmapCont.width = 118;
                              bitmapCont.height = 103;
                              bitmapCont.addEventListener(MouseEvent.CLICK,draw,false,0,true);
                              bitmapCont.addEventListener(MouseEvent.MOUSE_OVER,overFunc,false,0,true);
                              bitmapCont.addEventListener(MouseEvent.MOUSE_OUT,outFunc,false,0,true);
                              rect.y = 540;
                    addChild(container);
                    container.x = 960;
                    addEventListener(Event.ENTER_FRAME,update);
                    return;
          loadedImages.push(imageLoader1.content);
          currImage++;
          imageRequest = new URLRequest(imagesList[currImage]);
          imageLoader.load(imageRequest);
function overFunc(e:Event):void
function outFunc(e:Event):void
import flash.display.Sprite;
import flash.events.Event;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
var bd:BitmapData = new BitmapData(1080,1920,true,0x00000000);
var b:Bitmap = new Bitmap(bd);
b.y = 0;
b.x = 0;
b.height = 1920;
b.width = 1080;
addChild(b);
var container:Sprite
var vel:Number = 0;
var acc:Number = 0;
var damp:Number = 0.95;
function update(e:Event):void
          acc = 0;
          if(mouseY>1200)
          acc = - - - -1;
          if(mouseY<550)
          acc = - - -1;
          vel +=acc;
          vel*=damp;
          container.y += vel;
          if(container.y>200)
          container.y = 200;
          if(container.y < 730-container.height)
          container.y = 730-container.height;
function draw(e:MouseEvent):void
          bd.draw(Sprite(e.currentTarget));

replace
xmlLoader.load(xmlRequest);
with
xmlLoader.load(xmlRequest1);

Image gallery help request

Hi
i would like to come up with a similar effect i have a screen
shot of the page.
i would like the image to be in the center and the thumnails
at the right side in rectangular shape one under the other and 2
arrows pointing up and down "one of them on top of the thumnails
and the other one underneeth of the thumnails pointing downword"
for the viewer to scroll down or up the thumnails..
best regards
Mike

Have a look at this Zip file (
chosenson.netfirms.com/pic%20gallery.zip )
It should demonstrate the principals behind what you are
looking for.

Image Gallery issues with Lightbox2 - please help!

Hello there,
I am using Lightbox2 image gallery. The loading.gif and close.gif aren't showing up and I think there's an issue with the path in the lightbox.js file. The loading and close gifs are located in the Images gallery so I changed the path in the lightbox.js file accordingly - I've gone through this many many times but they are still not showing up.
Can anyone please help me?
My website is: www.labellepetraie.com
Here's where I downloaded the script from: http://www.huddletogether.com/projects/lightbox2/#how
I have tried all the path combinations mentioned in their forum but to no avail. What am I doing wrong?
Thank you for any help you can offer to me.
Regards!

Interesting. I've just looked at your scripts, and it would appear that you have blended two versions of lightbox2 on your page,. Is that possible? The lightbox.js file has no function called initLightbox() in it, whereas older versions do. So, try changing this:
window.onload = function(){ // use this instead of <body onload â€¦>
     MM_preloadImages('../3websites/home4.jpg','../3web sites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../ 3websites/photos1.jpg');
        initLightbox();
to this:
window.onload = function(){ // use this instead of <body onload â€¦>
     MM_preloadImages('../3websites/home4.jpg','../3web sites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../ 3websites/photos1.jpg');
        //initLightbox();
to see if that works. I think so. Turns out the initLightbox() function call that we activated by fixing the code before is no longer needed by the lightbox2 script as of v2.04! I see that it still tells you to put that function call in the body tag, but i think that is wrong (which is very weird to say, can I really be right???). If you look at the example page online you'll see that he uses this body tag:
<body>
and there are no onload's anywhere.
Let me know.
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

How can I place a Lightroom 3 image gallery in a Dreamweaver page?

I would like to use an image gallery that I built in Lightroom 3 in a Dreamweaver CS5 website. I would like the image gallery to operate on my Dreamweaver page, not to be re-directed to a different page.
I'm pretty sure this is possible, but in my search for help in the forums, books, etc., I am not having much luck. Perhaps I'm using the wrong search words? Help to direct me would be very much appreciated. Cheryl B.

You'll need to work in CodeView.
Copy the relevant code from your image gallery page into your site page. Adjust paths to images & scripts as necessary.
Another simpler approach, insert an iframe into your site page. Point the iframe src to your gallery.html page. Adjust iframe height and width to accommodate the size of your gallery page.
http://w3schools.com/html/html_iframe.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Image Gallery Issue in As3

Hi,
     I am trying to implement a simple image gallery with alpha transition using as3. But an issue is occuring with this. After each image alpha transition, the stage becomes blank. The code i have used for image Gallery is following.CAn anybody help me. I am trying this for a week. but still i have a hope for make this working. So please help me.
import flash.display.Loader;
import flash.display.*;
import gs.TweenLite;
const TIMER_DELAY = 2000;
var totImages:Number;
var index:Number = 0;
var imgArr:Array = new Array();
var currentContainer:MovieClip = holder0;
currentContainer.alpha = 0;
var transTimer:Timer = new Timer(TIMER_DELAY);
//transTimer.addEventListener(TimerEvent.TIMER, startTransition);
var imgLoader:Loader = new Loader();
var myXML:XML = new XML();
var XML_URL:String = "images.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void{
    myXML = XML(myLoader.data);
    processXML(myXML);
function processXML(xml){
    totImages = xml.children().length();
    for(var i=0;i<totImages;i++){
        var tempVar = xml..item[i]..image;
        imgArr.push(tempVar);
    //transTimer.start();
    currentContainer = holder0;
    loadImage();
function loadImage(){
    var url = imgArr[index];
    //ImgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeInImg);
    var fileRequest:URLRequest = new URLRequest(url);
    imgLoader.load(fileRequest);
    currentContainer.addChild(imgLoader);
function fadeInImg(e:Event){
    TweenLite.to(currentContainer,3,{alpha:1,delay:2,onComplete:switchClip});
function switchClip(){
    if(index < totImages){
        index++;
    } else {
        index = 0;
    if(currentContainer == holder0){
        currentContainer = holder1;
    } else {
        currentContainer = holder0;
    currentContainer.alpha = 0;
    MovieClip(this.root).swapChildren(holder0, holder1);
    loadImage();
Thanks and Regards,
                     Sreelash

Hi Adrei, I have implemented the thumbnail button also. Its working but the problem is that thumbnail buttons and controls are placing behind the image container. How can i place the thumbnail buttons and control buttons over the image. You can view the result in the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGallAnd.html
The working swf is with the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGall.html
The code that i used for creating thumbnail is following
import flash.display.DisplayObject;
import flash.display.*;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.text.*;
import flash.net.*;
import flash.utils.Timer;
import gs.TweenLite;
import gs.easing.*;
var xmlURL:String = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/images.xml";
var loadedImages:Array = [];
var imageURLs:Array = [];
var thumbArr:Array = [];
var imageLoader:Loader;
var prevImage:DisplayObject;
var currentImage:DisplayObject;
var thumbContainer:MovieClip;
var currThumb:MovieClip;
var prevThumb:MovieClip = null;
var showTimer:Timer;
var timerDuration:int = 5000;
var tweenDuration:int = 2;
var currentIndex:int = 0;
var activIndx:Number = 0;
var slidesHolder:Sprite;
var prvFlag:Boolean = false;
var nxtFlag:Boolean = false;
var twnFlag:Boolean = false;
var rt_lt_Flag:Boolean = true;
var myXMLURL:URLRequest = new URLRequest(xmlURL);
var xmlLoader:URLLoader = new URLLoader(myXMLURL);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(myXMLURL);
var a:int = 90;
ctrlBox.btnPlay.buttonMode = true;
ctrlBox.nextImg.buttonMode = true;
ctrlBox.prevBtn.buttonMode = true;
ctrlBox.btnPause.buttonMode = true;
ctrlBox.btnPlay.visible = false;
ctrlBox.btnPause.addEventListener(MouseEvent.CLICK,stopScroll);
ctrlBox.btnPlay.addEventListener(MouseEvent.CLICK,startScroll);
ctrlBox.nextImg.addEventListener(MouseEvent.CLICK,shwNext);
ctrlBox.prevBtn.addEventListener(MouseEvent.CLICK,shwPrev);
function xmlLoaded(e:Event):void {
     var a:int = 45;
     e.target.removeEventListener(Event.COMPLETE, xmlLoaded);
     processXML(XML(e.target.data));
function processXML(xml:XML):void {
     var len:int = xml.children().length();
     var tempVar:String;
     for (var i:int = 0; i < len; i++) {
          tempVar = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/" + xml..item[i]..image;
          //trace(tempVar)
          imageURLs.push(tempVar);
     preload();
     createThumbs();
function createThumbs():void{
    thumbContainer = new MovieClip();
    addChild(thumbContainer);
    for(var i:int=0;i<9;i++){
        var thmbHolder:MovieClip = new MovieClip();
        thumbContainer.addChild(thmbHolder);
        //MovieClip(this.root).swapChildren(currentImage, ctrlBox);
        thmbHolder.buttonMode = true;
        var thmb:thumbClass = new thumbClass();
        thmbHolder.addChild(thmb);
        thumbArr.push(thmbHolder);
        thmbHolder.name = i.toString();
        thmb.imgNum.text = (i+1).toString();
        thmbHolder.addEventListener(MouseEvent.CLICK,showImage)
        //trace(thmb.imgNum.text)
        thmbHolder.x = i*(thmbHolder.width+5)+5;
    thumbContainer.y = stage.stageHeight - thumbContainer.height;
function showImage(e:MouseEvent):void{
    var imgIndx:Number = e.target.parent.parent.name;
    prevThumb = currThumb;
    currThumb = e.target.parent.parent;
    currThumb.buttonMode = false;
    if(activIndx != imgIndx){
        prevThumb.buttonMode = true;
        currentIndex = imgIndx-1;
        shwNext(null);
        activIndx = imgIndx;
    } else {
        stopScroll(null);
function preload():void{
     var len:int = imageURLs.length;
     for (var i:int = 0; i < len; i++) {
          imageLoader = new Loader();
          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPreloadComplete);
          loadedImages.push(imageLoader);
          imageLoader.load(new URLRequest(imageURLs[i]));
function onPreloadComplete(e:Event):void {
     e.target.removeEventListener(Event.COMPLETE, onPreloadComplete);
     if (!showTimer && loadedImages[0].content &&   loadedImages[1].content ) startShow();
function startShow():void{
     currentImage = loadedImages[0];
     currentImage.alpha = 0;
     slidesHolder = new Sprite();
     var slideMask:Sprite = new Sprite();
     var gr:Graphics = slideMask.graphics;
     gr.beginFill(0xff0000);
     gr.drawRect(0, 0, currentImage.width, currentImage.height);
     gr.endFill();
     addChild(slidesHolder);
     addChild(slideMask);
     slidesHolder.x = slideMask.x = 0;
     slidesHolder.y = slideMask.y = 0;
     slidesHolder.mask = slideMask;
     slidesHolder.addChild(currentImage);
     TweenLite.to(currentImage, 10, { alpha: 1 } );
     showTimer = new Timer(timerDuration);
     showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
     showTimer.start();
function slideTransition(e:TimerEvent):void{
     var nextImage:int;
     if(rt_lt_Flag == true){
         if(nxtFlag == true){
             showTimer.stop();
             nxtFlag = false;
         nextImage = currentIndex < loadedImages.length - 1 ? currentIndex + 1 : 0;
         if (loadedImages[nextImage].content) {
              currentIndex = nextImage;
              loadedImages[currentIndex].x = slidesHolder.width;
              slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
              prevImage = currentImage;
              currentImage = loadedImages[currentIndex];
              showCurrent();
     } else {
         if(prvFlag == true){
             showTimer.stop();
             prvFlag = false;
         nextImage = currentIndex > 0 ? currentIndex - 1 : loadedImages.length - 1;
         if (loadedImages[nextImage].content) {
             currentIndex = nextImage;
             loadedImages[currentIndex].x = -(stage.stageWidth);
             slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
             prevImage = currentImage;
             currentImage = loadedImages[currentIndex];
             showCurrent();
     activIndx = currentIndex;
     //trace(currentIndex)
function showCurrent():void{
     // make sure they have proper alphas
     //prevImage.alpha = 1;
     //currentImage.alpha = 0;
     //TweenLite.to(prevImage, tweenDuration, { x: -slidesHolder.width } );
     twnFlag = true;
     if(rt_lt_Flag == true){
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
     } else {
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
function onTweenProgress():void{
    if(rt_lt_Flag == true){
         prevImage.x = currentImage.x - prevImage.width;
    } else {
        prevImage.x = currentImage.x + prevImage.width;
function removePrevious():void {
     if (slidesHolder.contains(prevImage)) slidesHolder.removeChild(prevImage);
     twnFlag = false;
function stopScroll(e:MouseEvent):void{
    ctrlBox.btnPlay.visible = true;
    ctrlBox.btnPause.visible = false;
    showTimer.stop();
function startScroll(e:MouseEvent):void{
    rt_lt_Flag = true;
    ctrlBox.btnPlay.visible = false;
    ctrlBox.btnPause.visible = true;
    resetListener(timerDuration=5000,tweenDuration=2)
function shwNext(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = true;
        stopScroll(null);
        nxtFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function shwPrev(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = false;
        stopScroll(null);
        prvFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function resetListener(timerDuration,tweenDuration){
        showTimer.removeEventListener(TimerEvent.TIMER, slideTransition);
        showTimer = new Timer(timerDuration);
        showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
        showTimer.start();
Can you help me on how can i swap the depth of images and control buttons.
Thanks and regards,
Sreelash

Image Gallery picture orientation

Is there a way to have a gallery where all of the pictures are rotated 90°? I have pictures that are taller than they are wide, so I would like them to be display sideways.

Hi Bruton
Siena does not currently support the ability to rotate pictures. However if you have images that are taller than wide, you could use an image gallery for which the template height is greater than its width. You should be able to see several images next to
each other.

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How do i apply a basic jQuery to my image gallery?

I'm using jQuery in order to allow an image gallery to show the same product in various colours. However the jQuery I'm using, animates the next image to sweep in from the left. And i just want the images to change in a basic way, so one image is on the screen at all times. Could someone please help me?
This is the current jQuery I'm using.
<script>
$(document).ready(function () {
    $("#red").click(function () {
        $("#img-red").show('');
                                $("#img-etchedglass, #img-blue, #img-green").hide();
    $("#blue").click(function () {
        $("#img-blue").show('');
                                $("#img-etchedglass, #img-red, #img-green").hide();
    $("#green").click(function () {
        $("#img-green").toggle('');
                                $("#img-etchedglass, #img-red, #img-blue").hide();
    $("#etchedglass").click(function () {
        $("#img-etchedglass").show('');
                                $("#img-blue, #img-red, #img-green").hide();
</script>
I have already asked on a previous stream, but could do with this sorted asap.
Thanks!!

If you have individual product images why don't you just write them to one <div> on the page (example below)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#red').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">');
$('#blue').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183385/1833845416/aglais-urticae---little-fox-1441799-m.j pg" alt="">');
$('#green').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/45/443536/blue-butterfly-1433138-m.jpg" alt="">');
</script>
</head>
<body>
<div id="productImage">
<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">
</div>
<a href="#" id="red">Red</a>
<a href="#" id="blue">Blue</a>
<a href="#" id="green">Green</a>
</body>
</html>

Help! I need a special image gallery!!

Hello!
anyone know if you can make an image gallery with thumbnails and where each one is linked to a photo slide? Also require that the thumbnails act as a color button, not appear like a thumbnail photo. I need help! Thanks in advance!
PD: sorry for my english skills!!!

Hello,
You can use Blank Composition Widget to achieve this.
Seems like you are trying to create something similar to : http://muse.adobe.com/widgets/composition/slideshow-ouatt.html
You can insert your images in the Target containers and can use Fill colors for different states of trigger containers.
Please refer to the video which might help : http://tv.adobe.com/watch/muse-feature-tour/muse-trigger-target/
Regards,
Sachin

Pixelated Images on Web Gallery - Help!

We have been receiving complaints from our clients that our web gallery images are pixelated - and indeed they are to the point that you cannot recognize the person in the image! I have tried to upload different resolutions - high (3000 pixels or more) and low (900 x 1000 or so) and nothing seems to change the way the images look. We use bridge we gallery for clients to order from, so this is obviously effecting what they want to order. Anyone have any ideas on how to remedy this? Please help!

I am not sure how to determine that. The only options available there are for Small - Extra Large images, nothing about the size in K. When it is in Bridge it looks the way all photos look in Bridge, but when I actually upload it to the web that is when things get ugly.

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Image gallery in webcenter using content presenter template

Hi,
I created a content presenter template for image gallery in webcenter.
The images from UCM are not displayed without log in to the webcenter application.
I am getting a error like
" Error calling UCM server associated with repository UCM. The service GET_FILE was called with user anonymous at time 3/18/15 11:12 AM, and returned statuscode -1.
oracle.stellent.ridc.protocol.ServiceException: Unable to download 'HSCSRV154.ALLE006130'. Access denied by records manager "
Once i log in the images are displayed.
What is the problem here?please help.
I am using the latest webcenter extension in jdev 11.1.1.7
Thanks,
chandrasekar M

Hi Vinod,
I tried using af:image like below and its the same issue.I have read in most of the blogs that since this is in the content presenter template, the image has to be displayed using output text with escape set to false.
<af:image source="#{node.propertyMap['REGDEF:Image'].asTextHtml}" id="image5"/>
I am not using <img> anywhere, its just that on the webpage when the image doesnt appear, I tried to see the source of the image using Firebug and it shows following:
<img src="${wcmUrl('rendition','xyz/web')} " alt = "Logo">
Edited by: Swathi Patnam on Jul 13, 2012 6:00 PM

Using jquery image gallery - help!

Similar Messages

Maybe you are looking for