Making a scrolling image gallery?
hello,
I am just learning HTML and am stuck. I have been trying to make an image gallery that will scroll horizontally, however all my images keep stacking vertically they do not scroll and they don't remain "hidden" I have my images in a div tag and its styled, I've copied some script from the net as well to make them auto scroll... and they still do the same thing no matter what I try. What am I missing?
jQuery Smooth Div Scroll - smooth content scrolling jQuery plugin - Thomas Kahn
that is where I got this code from
this is what my page looks like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv2 {
position:absolute;
width:58px;
height:39px;
z-index:600;
left: 31px;
top: 10px;
#scrollable div.scollablearea {
position:relative;
disply:block;
float:left;
margin:0;
padding:0;
h3 {
word-spacing: 100px;
</style>
<script type="text/javascript">
$(document).ready(function (){
$("#makemescrollable").smoothdivscroll({
mousewheelscrolling: "alldirections", manualcontinuousscrolling: true, autoscrollingmode: "onstart"
</script>
</head>
<body>
<div class="container">
<div class="header">Clarendon Miller Community Archives<br />
</div>
<div class="sidebar1" id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="documents.html">Documents</a></li>
<li id="menu"><a href="">Photos</a>
<ul>
<li><a href="plevna.html">Plevna</a></li>
<li><a href="ompah.html">Ompah</a></li>
<li><a href="ardoch.html">Ardoch</a></li>
<li><a href="fernleigh.html">Fernleigh</a></li>
<li><a href-="snow road.html">Snow Road</a></li>
</ul>
</li>
<li><a href="books.html">Books</a></li>
<li><a href="">Events</a>
<ul>
<li><a href="pastevents.html">Past Events</a></li>
<li><a hfref="futureevents.html">Future Events</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
<h2>Churches</h2>
<h4>Holy Trinity Anglican Church</h4>
<h6>History-</h6>
<h6>Gallery-</h6>
<div id="scrollable">
<img src="image/plevna/church/anglican/holytrinityoutside1small.jpg" alt="holy trinity plevna" id="holytrinity6"/>
<img src="image/plevna/church/anglican/holytrinityoutside2small.jpg" alt="holy trinity plevna" id="holytrinity7"/>
<img src="image/plevna/church/anglican/holytrinityoutside3small.jpg" alt="holy trinity plevna" id="holytrinity8"/>
<img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
<img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
<img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
<img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
<img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity10"/>
</div>
<h4>Plevna United Church</h4>
<h6>History-</h6>
<h6>Gallery-</h6>
</div>
<div class="footer">
<p> KFPL <span class="justifyrt"> in partnership with Township of North Frontinac</span></p>
<div id="apDiv2"><img src="kfpl.jpg" width="57" height="36" id="Image2" /></div>
</div>
</div>
</body>
</html>
Similar Messages
-
Help with scrolling image gallery?
Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Marc Moss Art</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
<img src="../../../../mosspictures/DSCN0040.JPG" alt="">
<img src="image-3.jpg" alt="">
<img src="image-4.jpg" alt="">
<img src="image-5.jpg" alt="">
<img src="image-6.jpg" alt="">
<img src="image-1.jpg" alt="">
<img src="image-2.jpg" alt="">
<img src="image-3.jpg" alt="">
<img src="image-4.jpg" alt="">
</div>
<nav>
<div id="navigation">
<ul>
<li><a href="#">bio</a></li>
<li><a href= "#">inspiration</a></li>
</ul>
</div>
</nav>
<!-- end .content --></article>
<footer>
</footer>
<!-- end .container --></div>
</div>
</body>
</html>Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
<img src="mosspictures/DSCN0040.JPG" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O. -
Scrolling image gallery problems
I am creating a scrolling image gallery using thumbnails. I have 36 thumbnails that are 100 x 100 px. I cannot figure out the x y coordinates to line up the images correctly. They are overlapping. I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap. Does anyone have a clue how to fix this? I am working on this site for a very pushy client who wants it done NOW...Thanks,
If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.
-
Newbie Scrolling Image Gallery
can someone help me figure out why my site isn't loading an
external image gallery? the tutorial i used can be found here:
http://www.oman3d.com/tutorials/flash/imagegallery/
they made the image gallery is completely done with
actionscript and it works in the .swf for the gallery, but as soon
as i call it to be loaded into the home .swf it doesn't work.
here's the link to the sites homepage:
(oh and dont worry i know the pics are pixelated and some
things need fixed, i'm just trying to get the site working first)
http://lightboy101.110mb.com/bootleg/Splash.swf
--- here is the gallery----
http://lightboy101.110mb.com/bootleg/Gallery.swf
if anyone can help me, please let me know. or if you know a
tutorial with a better scrolling image gallery, that would be
great. thanks.awesome! thanks! but now i seem to have another problem... =/
the far left and far right images are cut off. it's as if the
gallery width is being set to the stage of the entire site, and not
the gallery.swf height/width. i think it has something to do with
this code:
myThumb_mc._x = (i-1)*myThumb_mc._width;
myThumb_mc._y = (Stage.height-myThumb_mc._height)/2;
and
large_mc._x = (Stage.width-large_mc._width)/2;
large_mc._y = (Stage.height-large_mc._height)/2; -
Image gallery with scrolling thumbnails?
Hi All,
I am trying to build an image gallery that will contain 1 big picture and a Horizental strip of thumbnails that will allow scroll trough the thumbnails
anyone can explain or point out a good tutorial for this?
Thanx,
AdiHi Adi,
do you really ask us for a tutorial, 'cause there are so many nice ready made solutions (with source code, which you could use as a tutorial too), like these:
http://www.efectorelativo.net/laboratory/noobSlide/ Sample 7
http://www.electricprism.com/aeron/slideshow/
http://opiefoto.com/articles/photoslider#example
http://sandbox.scriptiny.com/javascript-slideshow/
and so on...
Hans-Günter -
Horizontal Photo Scroll/Swipe Gallery
Hi All,
I am making a horizontal Photo Gallery larger than 10,000 px in width. Users should be able to Swipe (on touch devices) and Scroll on Pc.
I came across some previous posts like this, but i dont know where to begin.
https://forums.adobe.com/message/5247759#5247759#5247759
Things I am confused about:
1 - I cant make the stage go wider than 10,000px, Does it mean I should place pics next to each other and navigate through them via code?
2 - I dont know how to make Swipe actions that are sensitive to intensity/distance/duration of users touch. I can only code the image to move for a fixed number of pixels
3 - I am not sure what would be the best/simplest approach to make my own scrollbar in this case (without starting from ground zero).
I appreciate any links or overall guidelines so i can start on right path.
ThanksYou could have a 2 image holders for transitions from one to another and change the image source based on the user action.
-
Howdy,
I would like to create an sliding xml drivin photo gallery,
similar to
this
one at flashkit but all linear and only previous and next
buttons, no numbers. Any ideas?
Thanks,
ConradHi --
I clicked on the link for your gallery and the images load??
Both when I
click on the image or when I click the "next" and "previous"
buttons --
although the "hit" area for the buttons is below the actual
text so you
should adjust that on those buttons. I would also recommend
not making the
text selectable so the cursor won't change to the "I bar"
Rich
"joesavy" <[email protected]> wrote in
message
news:fcp3qi$4ak$[email protected]..
>I created an XML scrolling thumbnail gallery using a
>
http://www.kirupa.com/developer/mx2004/thumbnails.htm
>
> I then had to alter the action script to get my
thumbnails to display
> properly
> -- they were spaced out or overlapping each other and
not in the sequence
> specified in the XML file. The new code works great
locally, but the
> thumbnails
> and larger image refuse to load remotely in every
browser i've tried. Any
> thoughts on how to alter the action script to load the
gallery?!?! I'm not
> much
> experienced in Flash so any help would be most
appreciated.
>
> You can find the page with my unloadable gallery
>
http://www.sullivancreative.com/clients/se-07-7-24/se_website/gallery.html
>
> You can see my action script in my
>
http://www.sullivancreative.com/clients/se-07-7-24/se_website/xml_photogallery_s
> crollthms_fix.fla
>
> Thanks!
> Joe.
>
> -
How can I create an image gallery with "next" buttons?
So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container. -
Hi all,
I am trying to work out how to create an image gallery on a
page whereby there is a set of thumbnails to the side and the
relevant large image opens adjacent to the thumbnails when they are
moused over.
I have done this using the hide/show layers function but the
output appears incosistently in different browsers and/or window
sizes. I had in mind some adaptation of the "swap image" behaviour
that would open the swap in a different position? Or alternatively
making the layers approach display consistently?
The layers version of the page can be
viewed
here
Any suggestions or guidance would be greatly appreciated,
thanks in advance,
GrahamOn Thu, 1 Feb 2007 15:25:09 +0000 (UTC), "hydroculture"
<[email protected]> wrote:
>I don't know the answer - wish I did, but I have been
using a substitute where
>I click on the thumbnail - which via a hyperlink takes me
to a page where the
>large image appears. Not as neat as what we both want ,
but gets the same
>effect,
If clicking a thumbnail is an option then this is a better
solution -
a free extension from PVII:
http://www.projectseven.com/tutorials/images/showpic/index.htm
Steve
steve at flyingtigerwebdesign dot com -
How do you build an image gallery in Flash CS3 actionscript3?
I am building my entire website in flash cs3, actionscript3
but I really need help building an image gallery. What I need is a
horizontal scroll bar that contains thumbs within it and then loads
the full size image right above the scroll bar. Anyone has any
suggestions for books, tutorials or even safe places to purchase
the fla that I can customize it?if you want help understanding as3 check:
http://www.senocular.com/flash/tutorials/as3withflashcs3/
if you want to purchase a custom fla that does exactly what
you want send me an email via my website. -
Help with scrolling photo gallery
I'm using the code below to for a scrolling photo gallery. I got this from another forum on Adobe. My problem is that I can't get my images to upload. I uploaded this for an image but it's not working:
<img src="images/baca_poster_small.jpg" data-cycle-title="image1">
Can someone please help me with getting my pictures to work in this?
Thanks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Plugin Script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
data-cycle-pause-on-hover="true"
data-cycle-speed="700"
>
<!--your images go here-->
<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">
<!--end slideshow-->
</div>
</body>
</html>Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
<img src="mosspictures/DSCN0040.JPG" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O. -
If a mod could delete my other post as I am quite far on from that and now having different issues. Thanks.
I am really stuck. I will try my best to explain things clearly. I am making an image gallery and I got the code from this gallery here.
http://www.flashmo.com/preview/flashmo_122_3d_curve_gallery
I made some changes to make it how I wanted it, nothing drastic though. So now I have a nice gallery.
Explaining what I am trying to do will better help explain things. I am creating a modelling agency website. The gallery I created above will display an individual image of every model in the agency (which it does). Now when one of the model images is clicked, I then need it to load another image gallery which contains the complete set of images for that model, plus some of their information etc.
The way I am approaching it at the moment is to create an individual image gallery for every model in its own fla file. If say the first model is clicked (image 1) it will load the corresponding swf (1.swf). I am not sure how good it is loading an swf into what I already have, but couldnt think of another way. So now I have a seperate image gallery just to test things out, and I need to load it into my original image gallery.
So, I will show the code for the first gallery (which displays the individual images of each model). The important methods are p_click (which hides the first gallery and loads the external swf), and on_pic_loaded (which displays the external swf).
I hope you understand what I am attempting, as I dont know if I have explained it right as my brain is going dead! (although I am liking the challenge).
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import caurina.transitions.*;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
var container_x:Number = stage.stageWidth * 0.5;
var container_y:Number = stage.stageHeight * 0.5 + 160;
var container:Sprite = new Sprite();
container.x = container_x;
container.y = container_y;
addChild(container);
var scene:Scene3D = new MovieScene3D(container);
var cam:Camera3D = new Camera3D();
cam.zoom = 6;
tn_url_target.visible = false;
tn_title.text = "";
tn_desc.text = "";
tn_url.text = "";
loading_info.text = "";
url_button.visible = false;
var no_of_ring:Number = 1;
var angle:Number = 0;
var p_dict:Dictionary = new Dictionary();
var pa:Array = new Array();
var filename_list = new Array();
var url_list = new Array();
var url_target_list:Array = new Array();
var title_list = new Array();
var description_list = new Array();
var folder:String = "photos/thumbs/";
var i:Number;
var total:Number;
var flashmo_xml:XML = new XML();
var pic_loader:Loader = new Loader();
var mLoader:Loader = new Loader();
var xml_loader:URLLoader = new URLLoader();
xml_loader.load(new URLRequest("thumbnail_list_5.xml"));
xml_loader.addEventListener(Event.COMPLETE, create_thumbnail);
function create_thumbnail(e:Event):void
flashmo_xml = XML(e.target.data);
total = flashmo_xml.thumbnail.length();
var angle_per:Number = Math.PI * 2 * no_of_ring / total;
for( i = 0; i < total; i++ )
filename_list.push( flashmo_xml.thumbnail[i][email protected]() );
url_list.push( flashmo_xml.thumbnail[i][email protected]() );
url_target_list.push( flashmo_xml.thumbnail[i][email protected]() );
title_list.push( flashmo_xml.thumbnail[i][email protected]() );
description_list.push( flashmo_xml.thumbnail[i][email protected]() );
var bfm:BitmapFileMaterial = new BitmapFileMaterial(
folder + flashmo_xml.thumbnail[i][email protected]());
bfm.oneSide = false;
bfm.smooth = true;
var p:Plane = new Plane(bfm, 100, 100, 2, 2);
scene.addChild(p);
var p_container:Sprite = p.container;
p_container.name = "flashmo_" + i;
p_dict[p_container] = p;
p_container.buttonMode = true;
p_container.addEventListener( MouseEvent.ROLL_OVER, p_rollover );
p_container.addEventListener( MouseEvent.ROLL_OUT, p_rollout );
p_container.addEventListener( MouseEvent.CLICK, p_click );
p.rotationY = - (i * angle_per) * (180/Math.PI) + 90;
p.x = Math.cos(i * angle_per) * 300;
p.z = Math.sin(i * angle_per) * 300;
p.y = Math.floor( i / 22 ) * 5;
function startLoad()
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest("/subgallery/1.swf");
mLoader.load(mRequest);
function p_rollover(me:MouseEvent)
var sp:Sprite = me.target as Sprite;
Tweener.addTween( sp, {alpha: 0.5, time: 0.5, transition:"easeOutExpo"} );
function p_rollout(me:MouseEvent)
var sp:Sprite = me.target as Sprite;
Tweener.addTween( sp, {alpha: 1, time: 0.4, transition:"easeInExpo"} );
function p_click(me:MouseEvent)
var sp:Sprite = me.target as Sprite;
var s_no:Number = parseInt(sp.name.slice(8,10));
var mRequest:URLRequest = new URLRequest("subgallery/1.swf");
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_pic_loaded);
mLoader.load(mRequest);
Tweener.addTween( container, { y: 1200, time: 0.6, transition:"easeInExpo" } );
function goto_URL(me:MouseEvent)
navigateToURL(new URLRequest(tn_url.text), tn_url_target.text);
function on_open(e:Event):void
loading_info.text = "Loading... 0%";
function on_progress(e:ProgressEvent):void
var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
loading_info.text = "Loading... " + percent + "%";
function on_pic_loaded(e:Event):void
addChild(e.currentTarget.content);
//addChildAt(mLoader, 1);
mLoader.x = Math.round(stage.stageWidth - mLoader.width) * 0.5;
mLoader.y = Math.round(stage.stageHeight - mLoader.height) * 0.5;
//mLoader.addEventListener(MouseEvent.CLICK, remove_pic);
Tweener.addTween( mLoader, { alpha: 1, time: 0.8, transition:"easeInExpo" } );
removeEventListener(Event.ENTER_FRAME, render);
function remove_pic(e:Event):void
Tweener.addTween( pic_loader, { alpha: 0, time: 1, onComplete:function() { removeChild(this); } } );
Tweener.addTween( container, { y: container_y, time: 1, delay: 1, transition:"easeOutExpo"} );
addEventListener(Event.ENTER_FRAME, render);
tn_title.text = "";
tn_desc.text = "";
tn_url.text = "";
url_button.visible = false;
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
var distance_x:Number = (stage.mouseX - 400) * 0.0001;
angle += distance_x;
cam.x = - Math.cos(angle) * 150;
cam.z = Math.sin(angle) * 150;
scene.renderCamera(cam);
Current issues as the moment is firstly, I dont know if this is the best way to achieve what I want. Maybe there is a better option someone could tell me about, but you have to remember that each image displayed here will have multiple images to go with it.
In terms of what I am attempting above, I currently get
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///C|/Users/Nick/Desktop/gallery/gallery.xml
at _1_fla::MainTimeline/frame1()
I assume its a url error so I changed all urls in both fla's to contain the whole url path. Didnt seem to work though unless I missed something.
Any advise on absolutely anything will be so appreciated.
Many thanks
NickSorry about that. If you can check my history, I normally always thank people who have helped, and I was intending to go back on the last few to sort them out. Just got my first job so it has been rather hectic and been stressing out to much. Also, I do things slightly different to other people. If I receive a correct answer (which I normally do thank), I tend not to actually reply but to thank instead, mainly because if I reply I am pushing unanswered questions further down the list and eventually out of view. I will go back and sort out the thanks I owe.
In terms of asking the mods, other forums I visit are normally moderated by the community, so I assumed that someone like yourself might be the moderator.
I tottally understand what you are saying, and as I say, I am normally on top of this. Will go back now and sort out the thanks.
Sorry for the delay.
Nick -
Image Gallery or Lightbox that works for DW CS6?
Help! I need an image gallery or lightbox that works! I tried the Lightbox Gallery in Widgets and while it works for the most part, the nav buttons don't show up and I've put the files in every directory (path) possible. Does anyone have a fix for this - I've perused forums for hours about this. OR is there something else that's easy and fast and that works? And hopefully free?
Thank you so much!The page is not live, so here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title>
HLG - Flagstone Driveways Walkways Paths
</title>
<style type="text/css">
/*<![CDATA[*/
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
body {
background-image: url(images/background2.gif);
/*]]>*/
</style>
<link href="!-css-style.css" rel="stylesheet" type=
"text/css" />
<style type="text/css">
/*<![CDATA[*/
a:link {
color: #FFF;
/*]]>*/
</style>
<link href="css/lightbox.css" rel="stylesheet" type=
"text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet"
type="text/css" />
<script src="scripts/jquery.js" type="text/javascript">
</script>
<script src="scripts/lightbox.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #910000;
padding-left: 2px;
padding-top: 4px;
padding-right: 2px;
padding-bottom: 4px;
width: 550px;
height: auto;
text-align:center;
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #ffffff;
border-left-width: 4px;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 20px;
margin-left:10px;
margin-right:10px;
margin-top:5px;
margin-bottom:5px:
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffcc66;
border-left-width: 4px;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 20px;
#lightbox-container-image-box {
border-top: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
/* EndOAWidget_Instance_2127022 */
/*]]>*/
</style>
<script type="text/xml">
<![CDATA[
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
]]>
</script>
</head>
<body onload=
"MM_preloadImages('buttons/directionsover.png','buttons/contactover.png','buttons/gallery over.png','buttons/homeover.png')">
<table width="980" border="1" bordercolor="#000000" align=
"center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="40" align="center" bgcolor="#910000"
class="MaroonBanner">
<p>
Heartland Landscape Group, Inc.| Osage Beach,
Missouri | (573) 302-8855 | <a href=
"mailto:[email protected]" class=
"MaroonBannerEmail">[email protected]</a>
</p>
</td>
</tr>
<tr>
<td width="980" height="182" align="center" bgcolor=
"#000000">
<img src="images/plant1smlogo.jpg" width="980"
height="180" alt="Heartland Landscape Group" />
</td>
</tr>
<tr>
<td height="40" align="center" bgcolor="#910000">
<img src="images/escape_bnnr.png" alt=
"Escape the ordinary with greener landscape solutions"
width="980" height="40" />
</td>
</tr>
<tr>
<td valign="top">
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="213" valign="top">
<table width="200" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="46" colspan="2" valign=
"middle">
<a href="index.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Homepage','','buttons/homeover.png',1)">
<img src="buttons/home.png" alt=
"Homepage" width="210" height="45" id=
"Homepage" border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="services.html"><img src=
"buttons/servicesover.png" alt=
"Services" width="210" height="45"
border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="beforeafter.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Before & After Gallery','','buttons/galleryover.png',1)">
<img src="buttons/gallery.png" alt=
"Before and After Gallery" width=
"210" height="45" id=
"Before_and_After_Gallery" border=
"0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="directions.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Directions','','buttons/directionsover.png',1)">
<img src="buttons/directions.png" alt=
"Directions" width="210" height="45"
id="Directions" border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="contact.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Contact Us','','buttons/contactover.png',1)">
<img src="buttons/contact.png" alt=
"Contact Us" width="210" height="45"
id="Contact_Us" border="0" /></a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr>
<td width="53">
<a href=
"https://www.facebook.com/pages/Heartland-Landscape-Group-Inc/230076883731915"
target="_blank"><img src=
"images/fb_logo.png" alt=
"Follow Us on Facebook" width="50"
height="50" border="0" /></a>
</td>
<td width="147" valign="top" class=
"BodyTextsm">
Follow us on Facebook for project
ideas, tips and landscaping news!
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" class="Textmed">
This Web site is best viewed with
Mozilla Firefox or Google Chrome.
</td>
</tr>
</table>
</td>
<td valign="top" class="Heading">
<table width="765" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td valign="top" class="Heading">
<p>
Our Services - Flagstone Driveways,
Walkways & Paths<br />
<img src="images/line.png" width=
"757" height="3" alt=
"Horizontal Line" />
</p>
<p class="BodyText">
Whether replacing or building a new
driveway, walkway or path, naturally
beautiful flagstone is the perfect
alternative to concrete or brick
pavers. Depending on the individual
taste of the homeowner, there are
many sizes, colors, shapes, and
styles of natural stone to select
from, and lend themselves to the more
"natural" landscapes.<br />
</p>
<table width="550" border="0" align=
"center" cellpadding="0" cellspacing=
"0">
<tr>
<td align="center">
<div id="gallery" class=
"lbGallery">
<ul>
<li>
<a href=
"images/flagstone/images/garden_pathways.jpg"
title=
"Garden Pathway"><img src=
"images/flagstone/thumbnails/garden_pathways.jpg"
width="72" height="72" alt=
"Flagstone Entrance Patio" /></a>
</li>
<li>
<a href=
"images/flagstone/images/pa_stepper_path.jpg"
title=
"Pennsylvania Stepper Path">
<img src=
"images/flagstone/thumbnails/pa_stepper_path.jpg"
width="72" height="72" alt=
"Pennsylvania Stepper Path" /></a>
</li>
<li>
<a href=
"images/flagstone/images/black_hills_rustic_path.jpg"
title=
"Black Hills Rustic Path"><img src="images/flagstone/thumbnails/black_hills_rustic_path.jpg"
width="72" height="72" alt=
"Black Hills Rustic Path" /></a>
</li>
<li>
<a href=
"images/flagstone/images/flagstone_path_with_firepit.jpg"
title=
"Flagstone Path With Firepit">
<img src=
"images/flagstone/thumbnails/flagstone_path_with_firepit.jpg"
width="72" height="72" alt=
"Flagstone Path With Firepit" /></a>
</li>
<li>
<a href=
"images/flagstone/images/flagstone_with_gravel.jpg"
title=
"Flagstone With Crushed Creek Gravel">
<img src=
"images/flagstone/thumbnails/flagstone_with_gravel.jpg"
width="72" height="72" alt=
"Flagstone With Gravel" /></a>
</li>
</ul>
</div><script type=
"text/javascript">
//<![CDATA[
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: '/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#000000", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: 0.75, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Flagstone Patios', //Default text of image
txtOf: 'of'
// EndOAWidget_Instance_2127022
//]]>
</script>
</td>
</tr>
</table><br />
<table width="485" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" valign="top" class=
"BodyText">
<p>
- <a href="design.html" target=
"_self" class=
"Emailblack"><span class=
"Email">Landscape Design
Services</span></a>
</p>
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<span class="BodyText">-
Landscape Services:</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Ornamental Gravel &
Mulches</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Retaining Walls:</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td width="391">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Block</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Natural
Stone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Patios</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Brick</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Flagstone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Driveways, Walkways &
Paths</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Brick</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"flagstonewalks.html" target=
"_self" class=
"Emailblack"><span class=
"Email">Flagstone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Landscape
Steps</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Plantings &
Sod</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Water
Features</span></a></span>
</td>
</tr>
<tr>
<td width="45" height="32" valign=
"top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Outdoor Living
Fun</span></a></span>
</td>
</tr>
<tr>
<td height="30" colspan="3" valign=
"top">
<span class="BodyText">- <a href=
"irrigation.html" target="_self"
class="Emailblack"><span class=
"Email">Irrigation</span></a></span>
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<span class="BodyText">- <a href=
"lighting.html" target="_self"
class="Emailblack"><span class=
"Email">Lighting</span></a></span>
</td>
</tr>
</table><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="211">
</td>
<td width="486" align="center">
<span class="Copyright">Copyright © 2013 Heartland
Landscape Group, Inc.</span>
</td>
<td width="283">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> -
Adding "loading" movieclip to dynamic image gallery?
Hello again,
I've completed my XML-driven image gallery, however upon live testing I'd realized I made a rookie mistake and not put some kind of placeholder "loading" movie clip loop while the thumbnails—and subsequent full-size images—are being loaded. The images will randomly appear when loaded and I would like to be able to insert a placeholder movie clip while they load, and swap them up with the thumbnails/images after it has been loaded. The placeholder movie clip is in my library (loadingLoop), but I'm having problems getting it to work correctly.
Below is the original function that processes the XML and adds the thumbnail images; this is where I'm trying to insert the placeholder movie clip per XML child node (every attempt I've made just keeps throwing more errors, so I've omitted my attempts to avoid confusion), and I've attached the XML file for testing. And insight or help would be appreciated.
//Locate the external XML file and trigger xmlLoaded when complete
xmlLoader.load(new URLRequest("data/artGallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
//Load the XML and process the image locations
function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
//parse the nodes in the XML file
xmlList = xml.children();
//count the number of nodes in the XML file via XMLList
trace(xmlList.length());
//loop to load all of the thumbnails, based on the number of nodes in XMLList
//"i" = every child node in the XML file
for (var i:int = 0; i < xmlList.length(); i++) {
//Add loadingLoop movie clip per node and wait for thumnail to load before swapping out with imageLoader thumbnail images <-- help!!
//for every node, create a new instance to be put on stage
imageLoader = new Loader();
//load each thumbnail from its location per XML node's "thumb" attribute
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
//position of thumbnail instances per XML node (horizontally across stage)
imageLoader.x = i * 110 + 10;//thumbs are 100 x 100 so, +10 to the width, plus +10 from left edge
//imageLoader.y = 10;
//for each node in XML list, name the instance with the path to the location of the full size image
imageLoader.name = xmlList[i].attribute("source");
//for each node in the XML list, add a drop shadow
imageLoader.filters = [thumbDShadow];
//add thumbnails to stage
addChild(imageLoader);
dropTween = new Tween(imageLoader, "y", Bounce.easeOut, -100, 10, 1, true);
//set up thumbnails to wait for a click to execute showPicture
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
//set up thumbnails to scale when rolled over
imageLoader.addEventListener(MouseEvent.ROLL_OVER, sizeUP);Somehow I had a feeling this wouldn't be a copy-and-paste job for the full-size images. Sorry to be a bother. This is the showPicture function that is fired off when the thumbnail image is clicked (from our previous example). Two errors are thrown:
When the thumnail is clicked:
"Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/removeChild()
at MethodInfo-51()"
But the full-size image loads nonetheless. The second loading loop (loadingLoop2) is not removed. Below is the showPicture function:
//Load the full-size images and place onto the stage
function showPicture(event:MouseEvent):void {
//add new movie clip container
var mc2:MovieClip = new MovieClip();
addChild(mc2);
//clear the fullLoader—this is to help clear any full-size images that may already be on the stage (they have two options, click a new thumbnail, or close the current full-size image
fullLoader.unload();
//re-create the fullLoader, if there was one cleared
fullLoader = new Loader();
//load each full size image from its location per XML node's "source" deliniated by mc.ldr's "source" attribute
fullLoader.load(new URLRequest(event.target.name));
//add the loder to the container
mc2.addChild(fullLoader);
//create new instance of second loading loop
mc2.fsloop = new loadingLoop2();
//add the second loading loop to the container
mc2.addChild(mc2.fsloop);
//for each container, add a drop shadow
mc2.filters = [fullDShadow];
//set the container's position center on stage, making it the size of the loading loop until the full-size images are loaded
mc2.x = (stage.stageWidth - mc2.fsloop.width) * 0.5;
mc2.y = (stage.stageHeight - mc2.fsloop.height) * 0.5;
//place container on stage
addChild(mc2);
//fade in each container
fadeTween = new Tween(mc2, "alpha", None.easeNone, 0, 1, 0.5, true);
//check to see if the image has been loaded completely—this is to make sure the image's attributes can be used to re-center on stage and remove fsloop
fullLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, removeLoop2);
//set field to multiline so that the <br> HTML tags can be used
imageTextField.multiline = true;
//add text frame for description
imageTextField.x = 10;
imageTextField.y = 125;
//for each full-size image, load the description text from the XML child nodes
for (var j:int = 0; j < xmlList.length(); j++) {
//check to make sure that the correct full-size image matches the text node when clicked
if (xmlList[j].attribute("source") == event.target.name) {
//add each child node as a separate line in the same text field; added HTML tags for CSS application
imageTextField.htmlText = "<p><span class = 'projectName'>" + xmlList[j].child("projectName") + "</span><br>"
+ "<span class = 'toolsUsed'>" + xmlList[j].child("toolsUsed") + "</span><br><br>"
+ xmlList[j].child("projText") + "<br>"
+ "<span class = 'liveURL'>" + xmlList[j].child("liveURL") + "</span></p>";
function removeLoop2(event:Event):void {
//re-position the container to center on stage to accomodating the full sized image
mc2.x = (stage.stageWidth - fullLoader.width) * 0.5;
mc2.y = (stage.stageHeight - fullLoader.height) * 0.5;
//Add the text field
addText();
//hide instructional text, already on stage
galleryInfo_mc.alpha = 0;
//remove the full-sized loading loop
event.target.loader.parent.removeChild(MovieClip(event.target.loader.parent).loadingLoop2 );
//set up full-size images to "self close" by clicking on it
mc2.addEventListener(MouseEvent.CLICK, clearStage);
The second error gets thrown when the container is clicked and the function clearStage is executed, which does not remove the container:
"TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/removeChild()
at artGallery_v1_5_fla::MainTimeline/clearStage()"
This is the clearStage function:
//Allow full-size image to "self close" by clikcing on it and removing the text description
function clearStage(event:MouseEvent):void {
//clear the fullLoader
fullLoader.unload();
//remove the container
event.target.parent.removeChild(MovieClip(event.target.parent).mc2);
//remove the text field
removeChild(imageTextField);
//show the instructional text that is on-stage
galleryInfo_mc.alpha = 1;
Help! -
Image gallery. How to click on image to advance to next image?
Flex 4, flash builder 4.6.
This gallery has a row of numbers. When you click on a number, a photo displays above. Each number represents a photo from data.xml. Works good. Now I want to click on a photo that is already displayed and cause the next photo in the series to display. How do I go about doing this? Thanks.
<s:Application creationComplete="service.send()">
<fx:Declarations>
<s:HTTPService id="service" url="data.xml" result="serviceHandler(event)"></s:HTTPService>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var images:ArrayCollection;
private function serviceHandler(event:ResultEvent):void{
images = event.result.gallery.image;
]]>
</fx:Script>
<s:Image source="assets/poster/{imagesList.selectedItem.pic}" />
<s:List id="imagesList" dataProvider="{images}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Label text="{data.number}" fontSize="12" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</Application>
data.xml
<gallery>
<image>
<number>01</number>
<pic>photo01.jpg</pic>
</image>
<image>
<number>02</number>
<pic>photo02.jpg</pic>
</image>
</gallery>Hi..
i have a simaliar problem, can anyone help..
Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the to other images or the next image you have to hit the back button and then select another.
How can i swipe on the large image for move to the next item without having to go back to list. Thanks.
here is what ive got so far..
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Page {id1}"
destructionPolicy="never"
actionBarVisible="true"
viewActivate="init()">
<fx:Script>
<![CDATA[
import valueObjects.Bookpage;
[Bindable]private var id1:String;
[Bindable]private var thumbimage:String;
[Bindable]private var largeimage:String;
private function init():void
pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );
var thisbpage:Bookpage = data as Bookpage;
id1 = thisbpage.id;
largeimage = thisbpage.largeimage;
private function onZoom(event:TransformGestureEvent):void
var mySprite:Sprite = pgImage as Sprite;
if(mySprite.scaleY.valueOf() >= 1)
mySprite.scaleX *= event.scaleX;
mySprite.scaleY *= event.scaleY;
else
mySprite.scaleX = 1;
mySprite.scaleY = 1;
private function handleSwipe(event:TransformGestureEvent):void
// Swipe was to the right
if (event.offsetX == 1 ) {
// push the PreviousView without any data using default
some help here. pls ..swipe to prev image if any
// Swipe was to the left
else if (event.offsetX == -1 ) {
// push the NextView withour any data using
some help here. pls ..swipe to next in list
// Swipe was to the down
if (event.offsetY == 1 ) {
// push the PreviousView without any data using default
// ViewTransition
this.actionBarVisible = true;
// Swipe was to the up
else if (event.offsetY == -1 ) {
// push the NextView withour any data using
this.actionBarVisible = false;
]]>
</fx:Script>
<fx:Declarations>
<s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>
</fx:Declarations>
<s:states>
<s:State name="portraitPhone" stateGroups="phone,portrait"/>
<s:State name="landscapePhone" stateGroups="landscape,phone"/>
</s:states>
<s:actionContent>
<s:HGroup>
<s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>
<s:Button icon="assets/prev.png"/>
<s:Button icon="assets/next.png"/>
</s:HGroup>
</s:actionContent>
<s:Scroller x="0" y="0" width="100%" height="100%" >
<s:HGroup>
<s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}" />
</s:HGroup>
</s:Scroller>
</s:View>
Maybe you are looking for
-
Arch and Win 8.1 on the same SSD
Hi everyone, i'm using Arch on my notebook for quite some time now and it is great. Now i want to install it on my desktop machine. The problem is that Win 8.1 is installed on there on an SSD. I can't just erase Win unfortunately because -> games :-D
-
Does TREX have a Database?
I just started to use TREX 7.0. It seems to me that TREX7.0 does not use any database. Would you please help confirm this? Thanks!
-
Adobe: ActiveX vs Native in web dynpro
Hello, has there recently (the last week or so) been an update on Adobe Reader or windows xp that makes the adobe forms not work anymore with web dynpro? Last week i had a simple form (activeX) in my web dynpro that was working fine. The form had two
-
I hate the ICS "downgrade!" I cannot get my messages to open. My phone buzzes when I get a message but when i click on it, it just says please wait......indefinately! And when i try to open pics sent to me on my go sms pro app. it wont open them i
-
Nice Small App To Keep MacBook Pro Running With Lid Closed
Found a nice little app, NoSleep that keeps the MacBook Pro running even when the lid is shut, so I use it alone with Caffeine and MacLock. I had found that my system was crashing on a continuing basis and with No Sleep it hasn't.