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;
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.
-
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> -
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 -
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. -
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. -
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> -
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> -
I need to create an image gallery
I'm looking for a tutorial which explains me how to create a simple AS3 image gallery driven by an XML file.
The gallery I need is really simple:
- an horizontal bar placed on the bottom containing the thumbnails which scrolls left and right according to the mouse pointer
- clicking on a thumbnail the full image must be shown above the thumbnails' bar
- buttons for prev and next image
- clicking on the button which opens the gallery I must be able to pass a variable to make the gallery load the proper xml file (I've got 6 different categories to show)
That's all I need.
Do you know where I could find a tutorial?I'm trying to do it by myself.
I've decided to give to the xml file this structure
<imgList>
<img thumb='img_001_thumb.jpg' full='img_001_full.jpg' desc='image 001' />
<img thumb='img_002_thumb.jpg' full='img_002_full.jpg' desc='image 002' />
</imgList>
I've found some tutorials where they read the attributes in this way
xml.img@thumb
xml.img@full
xml.img@desc
where xml is an xml variable containing the xml file's data.
I think that syntax is for AS2, while I'm using AS3 and it say to me that a semicolon is expected before atsign.
How can I read the attributes thumb, full and desc in AS3? -
I'm creating my first xml driven image gallery in AS3 and could use some help. It's a pretty basic gallery that consists of a large image with thumbnails below it. You should see the large version of the thumbnails when you click on them, they should rotate chronilogically on it's own (use timer event?), and you should be able to scroll left or right in order to view additional thumbnails.
Below is what I have so far. My first task is to get the thumnails to line up correctly. I got the y value correct, but I need to space them out by 10px appropriatley. How can I do this? Thanks!
Jesse
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.ProgressEvent;
var myXML:XML;
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("images.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
var myImagePreloader:mcPreloader = new mcPreloader();
myImagePreloader.x = stage.stageWidth / 2;
myImagePreloader.y = stage.stageHeight / 2;
myImagePreloader.width = 75;
myImagePreloader.height = 75;
var container_mc:MovieClip;
var xCounter:Number = 0;
function processXML(event:Event):void
myXML = new XML(myXMLLoader.data);
myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
//createContainer();
loadThumbs();
function createContainer():void
container_mc = new MovieClip();
//container_mc.x = my_x;
container_mc.y = 510;
addChild(container_mc);
/*container_mc.addEventListener(MouseEvent.CLICK, callFull);
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);*/
container_mc.buttonMode = true;
/*preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);*/
function loadThumbs():void
var thumbLoader:Loader = new Loader();
for(var i:Number = 0; i < myXML.image.length(); i++)
var thumbURL = myXML.image[i].@thumb;
thumbLoader.load(new URLRequest(thumbURL));
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumbLoader.y = 510;
//trace(imageWidth);
function loadFull():void
var fullImageLoader:Loader = new Loader();
//var imageURL = myXML.image[i].@file;
/*fullImageLoader.load(new URLRequest(imageURL));
fullImageLoader.contentLoaderInfo.addEventListener(Event.OPEN, addPreloader);
fullImageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadImages);
fullImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);*/
/*function addPreloader(event:Event):void
addChild(myImagePreloader);
function preloadImages(event:ProgressEvent):void
var percent:Number = Math.round(event.bytesLoaded / event.bytesTotal * 100);
percent_txt.text = percent + "%";
function imageLoaded(event:Event):void
var myLoadedImage:Loader = Loader(event.target.loader);
addChild(myLoadedImage);
new Tween(myLoadedImage, "alpha", Strong.easeIn, 0, 1, 0.5, true);
percent_txt.text = "";
removeChild(myImagePreloader);
event.target.loader.removeEventListener(Event.OPEN, addPreloader);
event.target.loader.removeEventListener(ProgressEvent.PROGRESS, preloadImages);
event.target.loader.removeEventListener(Event.COMPLETE, imageLoaded);
function thumbLoaded(event:Event):void
var myLoadedThumb:Loader = Loader(event.target.loader);
addChild(myLoadedThumb);What you will want to do is maintain a placement variable that you adjust for each new thumbnail you add. So the first might go at xValue = 0. Once that thumbnail is processed you then add the width of that thumbnail plus the 10 pixels space you want.
If you know that the widths will all be the same and what that value is, then you can assign the location for the thumbnail loader prior to it loading like you do for the y property.
Otherwise, you will need to wait until the thumbnail has loaded before you can determine the width... which would mean you will need to load the thumbnails sequencially rather than using a for loop since they will not necessarily load in the order they are executed to do so. It is basically somewhat like what relaxatraja provided except using the width property. -
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.
>
> -
ANNC: Image Gallery Magic Now Available
Picture perfect...
Bring your images to life with the most powerful,
feature-rich image
gallery solution available for Dreamweaver: Image Gallery
Magic by
PVII - the leader in creative Dreamweaver extensions. Create
image
galleries from from inside Dreamweaver - in Windows or OS X.
Image
Gallery Magic can create the entire layout for you or you can
insert a
gallery into an existing page. While Image Gallery Magic is
powered by
thoroughly modern CSS and Scripting, we've taken great pains
to ensure
that your gallery will work in all modern browsers (on all
operating
systems) and some key older browsers, such as IE5.x (Windows
and OS X).
http://www.projectseven.com/products/galleries/hgmagic/index.htm
All aspects of your gallery are managed from within the iGM
user
interface window.
Add (append) new images to your gallery. You can use the
automatic build
mode, which leverages the Fireworks image processing engine,
or you can
select images that you've already processed yourself in
Photoshop or any
other image editor.
Delete images or re-order them.
Manage Captions, Descriptions, and a counter - including
where they
appear.
Edit images (the edit command launches your default image
editor and
loads the selected image).
Re-generate thumbnails automatically after editing a
full-size image
(Fireworks interoperability).
Choose a full-size image to load when your page loads.
Select the number of thumbnails to display per row.
Enable smooth-glide scrolling of thumbnail rows.
Choose an animation effect for your full-size images.
Supports Dreamweaver Templates.
Allows direct linking to individual images.
Search-engine friendly.
Accessible - even with JavaScript disabled.
The PVII Team
http://www.projectseven.comPicture perfect...
Bring your images to life with the most powerful,
feature-rich image
gallery solution available for Dreamweaver: Image Gallery
Magic by
PVII - the leader in creative Dreamweaver extensions. Create
image
galleries from from inside Dreamweaver - in Windows or OS X.
Image
Gallery Magic can create the entire layout for you or you can
insert a
gallery into an existing page. While Image Gallery Magic is
powered by
thoroughly modern CSS and Scripting, we've taken great pains
to ensure
that your gallery will work in all modern browsers (on all
operating
systems) and some key older browsers, such as IE5.x (Windows
and OS X).
http://www.projectseven.com/products/galleries/hgmagic/index.htm
All aspects of your gallery are managed from within the iGM
user
interface window.
Add (append) new images to your gallery. You can use the
automatic build
mode, which leverages the Fireworks image processing engine,
or you can
select images that you've already processed yourself in
Photoshop or any
other image editor.
Delete images or re-order them.
Manage Captions, Descriptions, and a counter - including
where they
appear.
Edit images (the edit command launches your default image
editor and
loads the selected image).
Re-generate thumbnails automatically after editing a
full-size image
(Fireworks interoperability).
Choose a full-size image to load when your page loads.
Select the number of thumbnails to display per row.
Enable smooth-glide scrolling of thumbnail rows.
Choose an animation effect for your full-size images.
Supports Dreamweaver Templates.
Allows direct linking to individual images.
Search-engine friendly.
Accessible - even with JavaScript disabled.
The PVII Team
http://www.projectseven.com -
N97 mini: folder setting for image gallery / photo...
Hi I've just got a simple question: is it possible to choose the images folder(s) which are shown in photobrowser or image gallery on a n97 mini?
now it shows all the images on my device/mass storage/sdhc card, and I don't want that to happen. I want to be able to choose the folders which are shown. now it also shows all icons of my pois inthere, so i've got over 400 images (all images which are used by programs) while there are only about 50 files in the images folder.
now i have to scroll through 350 images which i don't need, just to find 1 photo i want to use as a background.
hoping that there will be a software update which allows for changing these settings, so that it only shows the folders I want to use.
Solved!
Go to Solution.You can use X-plore from "lonelycatgames" , to hide an entire folder, but those images are used by programs this would be of no use.
If you are interested to know how:
1ownload and install X-plore, their website, (trial works as good as full, with a just a splash screen at startup)
2: Open it, Create a folder any where on memory card. Or if you know the folders where "those 400" pictures reside, navigate to it.
3: click Options>file>attributes>and tick "Hidden" it'll ask "Do you want to edit attributes of all file in this folder?" click yes.
Now all the file in a particular folder are hidden, so they won't show up in gallery.
Previous Phones: 6600, 7610, 6230, 6230i, 1100, 1112, N70, N73, N95, N95 8GB, 5800XM, 5230, C5, iPhone 3GS, SE Xperia X10, N900, N8, SE Xperia Arc
Current Phones: Nokia N9, iPhone 4
Maybe you are looking for
-
Bug regarding not filling in length of varchar field in logical model?
I successfully was able to create a logical model, engineer to relational, and generate DDL from this. However, I found after generating the DDL and attempting to run it, I received errors in creation of some tables saying "missing left parentheses."
-
Display Month and 12 previous Months
I am trying to create a report (CRXI) which will display month data for the current month and the 12 previous months. I am going to use subreports (similar to a calendar report) but am having trouble displaying the 12 previous month, year headers.
-
How do you switch between JRE v1.4.x and v1.5.x
Java 2 Runtime Environment, v1.5.0_02-b09 Control Panel doesn't appear to let user switch back to a 1.4.x version. Hoping someone can can me how to do this. I have an application that uses JRE 1.4.2 and does not allow user into the interface until th
-
Only Alert Data is not being inserted in SCOM 2012 Data Warehouse database
Hi All, Alert data is not getting inserted into SCOM Data Warehouse database since 10 days though I could see latest Performance data in DW DB. No changes were made as far I know on SCOM servers or DB's. I had this issue few months back and got reso
-
Can you buy a new battery for iphone4?
Hello, I am having trouble with my battery on my iphone4. i have had it now for 2 and a bit years but the battery is no good, i hardly use it during the day as i am working bur it does not hold battery power. Can i replace the battery or do i need to