Need to adjust this thumbnail gallery
Trying to figure this out. I am trying to load the images
that are being displayed into a scroll pane. HEre is where you can
download the source for the file.
http://www.kirupa.com/forum/attachment.php?attachmentid=30984&d=1132576428
I have tried using the linkage but with no success any ideas.
Thanks...
Hi Mrudula,
Usually webdynpro's are rendered with respect to screen resolution by default provided there is no explicit width-height specification for UI elements.
As specified in the best-practice guidelines, using Matrix Layout and streachedHorizontally to true/false streachedVertically to true/false
avoid size specifications for UI elements and if it is necessary use size in percentage.
cheers,
Nikhil Bose
Similar Messages
-
Need help making javascript thumbnail gallery function in javascript tab menu
Hello all,
I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work. It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab. In addition, once I click on the "gallery" tab the other tabs stop showing their content. I feel like I am missing something obvious. But I just can't figure out what. If anyone can help I would greatly appreciate it.
Thanks,
Natalie
Below is the code of my whole page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tour template</title>
<!--TABS-->
<link rel="stylesheet" type="text/css" href="MenuFader/style.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tour-button").css({
opacity: 0.3
$("#gallery-button").css({
opacity: 0.3
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the target div must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#contents").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
</script>
<!--End Tabs-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
#realtor panel {
width: 1000px;
body {
background-color: #282828;
margin: 0px;
.style4 {color: #A1A1A1}
-->
</style>
<!-- InstanceBeginEditable name="Gallery" -->
<title>Example tour page</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
<link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">
<!-- InstanceEndEditable -->
</head>
<!-- InstanceBeginEditable name="body" -->
<body>
<div id="realtor panel"><table width="100%" border="0">
<tr>
<td width="18%"> <div align="center"></div></td>
<td width="82%"> </td>
</tr>
</table>
</div>
<div id="page-wrap">
<div id="tour-button" class="button">
<img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
</div>
<div id="gallery-button" class="button">
<img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
</div>
<div id="info-button" class="button">
<img src="MenuFader/images/INFO.png" alt="info" class="button" />
</div>
<div id="specs-button" class="button">
<img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
</div>
<div class="clear"></div>
<div id="contents">
<div id="tour">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
<param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
<param name="quality" value="high" />
<embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
</object></noscript>
</div>
<div id="property gallery">
<div id="container">
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
<img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt sign.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt sign.jpg" alt="apt sign" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/entryway1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living1.jpg" alt="living1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living3.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining1.jpg" alt="dining1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Dining2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining2.jpg" alt="dining2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg" alt="kitchen1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed1.jpg" alt="bed1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom2.jpg">
<img src="Gallery/images/example/Tudor thumbs/bed2.jpg" alt="bed2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed3.jpg" alt="bed3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bathroom.jpg">
<img src="Gallery/images/example/Tudor thumbs/bath.jpg" alt="bath" />
</a>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="info">
<p class="style4">Content for info</p>
</div>
<div id="specs">
<p class="style4">This content is for specs.</p>
</div>
</div>
</div>
<!--script for gallery-->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '400px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
</script>
</body>
<!-- InstanceEndEditable -->
<!-- InstanceEnd --></html>Sure thing:
http://www.acresllc.net/TA501001.html -
Need help with this xml gallery !!!
i have build a gallery but its very simple...... it takes images from xml file.
i have attached all files in zip.
i just want two things if anyone can help.
first when i press next button it goes to next image but with no effect. it just displays next image ... i want to incorporate a sliding effect when the image is changed to another.
and second i want to use autoplay feature.
as soon as swf starts the images came one by one with difference of few seconds.
thx in advance... i really need help in this....!You're welcome.
I don't have an example to offer for the autorun. You should be able to think it thru. One key, as I mentioned is to preload all of the images first, that will allow for smooth playing of the show--no waiting for images to load between changes. You can load them into empty movieclips and hide them (_viisible = false) until they are needed. You could load them when called for, but you would have to put conditions on the displaying of things until the image loads, which will change when they are all loaded, so I recommend just loading them all first.
For the timing you can use setInterval. If something is going to be allowed to interupt the autorun, then you will need to make use of the clearInterval function as well, so that you stop the clock.
Since you will be wanting to know when things are loaded, you will need to use the MovieClipLoader.loadClip method for loading the images instead of using loadMovie. This is because the MovieClipLoader class supports having an event listener. If you look in the help documents in the MovieClipLoader.addListener section, there is an example there that provides a fairly good complete overview of using the code. The only difference is you'd be looking for the onLoadComplete event rather than the onLoadInit event. -
My Library (History/Show All History) does not show ANY History - only Tags & "All Bookmarks". What settings do I need to adjust to have this show. Nothing in the Options/Privacy seems to be relevant in English
Lightning is a problem for you because it hooks into Thunderbird at a low level and you need a version compiled for the platform Thunderbird is running on. So you can't do the preferred solution, which is to put your whole profile in a shared folder and have both instances of Thunderbird reference the same profile. (Ditto for Enigmail). Lightning may become an integral part of Thunderbird in an upcoming release, at which point this limitation due to Lightning should disappear.
And if you can't use a shared profile, you can't set your Lightning, or your Address Book, to share a common set of files. Put another way, the linkage from Thunderbird to its address book files and calendar data is hard-coded, and not exposed where we can adjust it. :-(
The halfway house is to place your mail stores in a shared place, and use the Local Directory setting in each account's settings to connect to it. They don't need to be in the profile; what's more important in your case is that they are in a folder accessible to both operating systems.
Look in your profile; everything under Mail and ImapMail needs to be moved out to a shared folder. Note the entries in Thunderbird under Local Directory before you do this, and reconstruct those pathnames in Thunderbird, but adjusted to suit their new locations.
(You can see here that you need to make many adjustments, one per account, in each instance of Thunderbird, so it's a high-maintenance solution and this is why we don't recommend it when the alternative, moving the whole profile, is possible.)
I share address books and calendars between Thunderbirds on various computers (and my phone and tablet) by syncing to something in the cloud; Google Contacts and Google Calendar are my choices, using gContactSync and CalDav.
Having made the break myself some years ago, I'd recommend you break away from Windows. ;-) -
DW8 - Need help with Flash Mirror Gallery by Flashdevelopment24
I just purchased an image viewer called Flash Mirror Gallery by Flashdevelopment24:
http://www.flashdevelopment24.com/extensions/flash_photo_gallery_06.aspx
I use DW8. Unfortunately the wizard and the instructions are WAY beyond me. I can insert the object on my page but I have no clue how to import images into it, do I need to create separate thumbnails?, etc. Its a European company and the English isn't taht great either which doesn't help.I went through all their FAQs and examples and I don't have a clue.
I'm doing something very simple, all I need are VERY simple directions on how to make this work. It would be best if there was a YouTube or other video tutorial available. I paid 45 buck for this and it useless to me right now. Help!I paid 45 buck for this and it useless to me right now. Help!
Sorry can't help, don't know the product at all.
If you are having problems with it, then it's best to contact the people you purchased it from no? They should either help you with support issues, you you should get a refund if it doesn't work as expected.
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap -
How to make a thumbnail gallery page that'll open individual slideshows?
Hi,
I'm trying to make a gallery of thumbnails for album covers I did, and want for it to open its own slideshow (on the same page / as a typical slideshow pop up) when a person clicks on one so he/she can view the main image and a few more thumbnails on its side for other artwork panels (as well as use the arrows if possible).
Anyone got an idea for an easier way to do this?
Thanks! I'm going insane over this... And it seems like this could be the easiest thing, but somehow I can't find a way...
(idem for B and C and so forth)
=Hi,
That would seem to be the perfect logical answer. But guess what? I've tried this many times without any luck. I MUST be doing something wrong, but simply have no clue what it is. SO I'll describe every tiny step, and maybe you can see where I'm at fault.
1- I drag & drop a Lightbox display from the the composition folder in the Widget library on a blank page.
2- I delete 2 of the 3 default thumbnails from above the main target/container,
3- I select the remaining whitest thumbnail, go on the FILL option the left corner, and add an image from my files. I choose scale to fit and make it the size I want.
4- I open the Trigger option in the upper left area and do the same for the "Normal" state (as a default, Muse puts it on the "Active" one). Now all my states have the same image. I also remove the stroke and fill color behind.
4- I select the default gray bars with arrows within the CONTAINER below and remove them (simply because I intend to change them with my own design and to make sure I don't stumble on them for the forthcoming steps)
5- I select the TARGET area and then go to my FILL option and change the white area to "no color".
6- I then select the CONTAINER area and change the default back color to an image of my choice (a background that I put at 80% transparency).
7- I re-select the TARGET area and drop a Lightbox widget from the Slideshows folder in the Widget library into the selected TARGET area. I resize it to my liking.
8- I go and click on the upper right option button (white arrow under a blue circle) of this new Lightbox to add the images I want.
9- As predicted, the images appear as they should: One big in the center and the proper amount of thumbnails above. When I click on them, they appear sequentially below also as intented.
10- At this point all should be great and working (I think), so I go in the preview section (and also tried via the Preview in Browser (crtl+shift+e)) and what appears, is my page with the actual thumbnail of the cover (again, as it should). BUT here comes the bug::::
Once I click on it, the Lightbox slideshow pops up, and all shows up but the actual center main image (as well as its default black area behind the image), e.g. what should be the bigger version of the 1rst thumbnail from the series above it. I try to click on the other thumbnails above the invisible image and nothing happens. Actually something does happen, because if I decide to click outside of the of the main image area, ONLY then all fades again and my main image pops up ALONE, everything else fades away! So to get out of there, I have to reclick outside but I'm then pushed back to the main original thumbnail gallery....
So it feels like it sorts of become like a 3rd level thing and this is obviously not what is needed...
Any idea what's problematic?!
Much thanks for having taken the time to read my little novel here! ; )
If this is not quite clear still, I could post a video of all of what I'm doing and the resulting problem. -
I'm using Flash 8 Professional
Here's the swf:
http://208.131.133.122/flash/
And my fla:
http://208.131.133.122/flash/scene.fla
(8MB sorry!)
Right now, when the mouse is in the same _x position as the
last thumbnail, the thumbnails slide gently to the left to reveal
more thumbnails then slide back to the right when the mouse moves
to the left again.
The problem is that they start sliding to the left whether or
not the mouse is over the thumbnail gallery. If the mouse is at the
bottom of the screen or the top of the screen and in the same _x
position as the last thumbnail, they will begin sliding.
I would like the thumbnails to begin sliding only when the
mouse hovers over the row of thumbnails and not when it is outside
that thumbnail area.
I added some actionscript to stop the movement of the
movieclip when the mouse is above the max or below the min _y
position of the clip; but, it does not work.
I don't really know what I'm doing. Can someone.... anyone...
tell me if this is something that can be done? And if yes, how?
Much thanks in advance.I see that your first wooden button is a 'scroll down' button
which plays through
the length of the thumbnails. Do you mean you want to
replicate and reverse this on the third wooden button 'scroll up' ?
I'm just guessing here but I'd say you accually have your
thumbnail gallery scrolling down as a motion tween and your scroll
up button just has a 'goto previous frame' type function on it?
If the previous statement is true then I would suggest two
options for you.
1.) You take the scrolling functionality out of a timeline
and do it all with action script. This would be the most effective
way of doing it.
2.) Since you probably don't want to make serious edits to
that .fla. Here's another way. You have a boolean called 'is_rev'
and a function called 'play_backwards'. These are contained within
the same movie clip as your thumbnail gallery.
<!-- code
var is_rev:Boolean = false;
-->
Your third wooden button has these actions on it.
on(release)
this.is_rev = true;
this.prevFrame(); // This is to start the reverse loop;
Your first wooden button would have this on it.
on(release)
this.is_rev = false;
this.play();
Your second wooden button would have this on it.
on(release)
this.is_rev = false;
The function would be:
function play_backwards()
if(this.is_rev)
this.preFrame();
Now on every single frame of your scrolling gallery you need
to call this.play_backwards();
Please note the way I structured the coding assumes every
object is on the same timeline. If your buttons are in a
different/parent movie clip relative to your gallery movie clip,
your going to need to make sure 'this' is set relative to the two
objects. (i.e. on your button -> this.prevFrame(); would
probably be this.gallery.prevFrame(); )
A quick design note. If your buttons symbolize scrolling not
movement they should be reversed since as the thumbnail gallery is
moving upwards the user is scrolling downwards. -
Hello
I want to get first frame from video file without playing it, and convert this frame into image while uploading video file from JSP page.The requirement is to have a thumbnail gallery of videos; the user can select any thumbnail and that video should get played above the gallery on the same page.
Kindly help me in figuring out how to get the first frame of video without playing it? ThanksFor those following along, I found that Adobe Flash CS3's FLV Player component works well, and is FAR less complicated than all the other solutions I found. I'm still working on getting it to behave exactly as intended, but it's definitely the easiest and most successful solution so far.
At this point, I have the embedded clips that display right away (despite not being fully loaded)... so you don't have blank spots, like non-progressive clips would do while they are loading. They also allow you to hit play even while they are still loading. So, all that is very good... The only issue now is the clips download regardless of whether you hit play or not... so all clips on the page will be downloading when you enter the page (causing a possible bottleneck, plus downloading all that data, regardless of whether it's needed or not). -
Okay: My start page is the one Google provides: http://www.google.ca/firefox?client=firefox-a&rls=org.mozilla:en-US:official and frequently it has a note underneath the search box that "You're not on the latest version of Firefox. Upgrade today to get the best of the Web!" But when I check for updates on the About Firefox window, it says my Firefox is up to date. So what is the start page looking for? Is there some setting I need to adjust? Or is this a Google marketing ploy to get me to switch to Chrome?
I tentatively think I have the solution; this is for when the session id value 'thing', in about:config, referred to in other answers is already on the default/rest state.
I am assuming, I don't what to imply certainty in-case there is a value wrong in our browsers, that the problem stems from the fact that our homepage is no longer the default for Firefox.
So, go to 'Options'>'General' and delete the homepage. This will reset it to the new address, which is 'about:home'.
I hope this helps some people. -
Noob needs help with this code...
Hi,
I found this code in a nice tutorial and I wanna make slight
adjustments to the code.
Unfortunately my Action Script skills are very limited... ;)
This is the code for a 'sliding menue', depending on which
button u pressed it will 'slide' to the appropriate picture.
Here's the code:
var currentPosition:Number = large_pics.pic1._x;
var startFlag:Boolean = false;
menuSlide = function (input:MovieClip) {
if (startFlag == false) {
startFlag = true;
var finalDestination:Number = input._x;
var distanceMoved:Number = 0;
var distanceToMove:Number =
Math.abs(finalDestination-currentPosition);
var finalSpeed:Number = .2;
var currentSpeed:Number = 0;
var dir:Number = 1;
if (currentPosition<=finalDestination) {
dir = -1;
} else if (currentPosition>finalDestination) {
dir = 1;
this.onEnterFrame = function() {
currentSpeed =
Math.round((distanceToMove-distanceMoved+1)*finalSpeed);
distanceMoved += currentSpeed;
large_pics._x += dir*currentSpeed;
if (Math.abs(distanceMoved-distanceToMove)<=1) {
large_pics._x =
mask_pics._x-currentPosition+dir*distanceToMove;
currentPosition = input._x;
startFlag = false;
delete this.onEnterFrame;
b1.onRelease = function() {
menuSlide(large_pics.pic1);
b2.onRelease = function() {
menuSlide(large_pics.pic2);
b3.onRelease = function() {
menuSlide(large_pics.pic3);
b4.onRelease = function() {
menuSlide(large_pics.pic4);
I need to adjust five things in this code...
(1) I want this menue to slide vertically not horizontally.
I changed the 'x' values in the code to 'y' which I thought
would make it move vertically, but it doesn't work...
(2) Is it possible that, whatever the distance is, the
"sliding" time is always 2.2 sec ?
(3) I need to implement code that after the final position is
reached, the timeline jumps to a certain movieclip to a certain
label - depending on what button was pressed of course...
I tried to implement this code for button number two...
b2.onRelease = function() {
menuSlide(large_pics.pic2);
if (currentPosition = finalDestination) {
this.large_pics.pic2.gotoAndPlay("s1");
--> sliding still works but it doesn't jump to the
appropriate label...
(4) I wanna add 'Next' & 'Previous' buttons to the slide
show - what would be the code in this case scenario ?
My first thought was something like that Flash checks which
'pic' movieclip it is showing right now (pic1, pic2, pic3 etc.) and
depending on what button u pressed u go to the y value of movieclip
'picX + 1' (Next button) or 'picX - 1' (Previous button)...
Is that possible ?
(5) After implementing the Next & Previous buttons I need
to make sure that when it reached the last pic movieclip it will
not go further on the y value - because there is no more pic
movieclip.
Options are to either slide back to movieclip 'pic1' or
simply do nothing any more on the next button...
I know this is probably Kindergarten for you, but I have only
slight ideas how to do this and no code knowledge to back it up...
haha
Thanx a lot for your help in advance !
Always a pleasure to learn from u guys... ;)
MikeHi,
I made some progress with the code thanx to the help of
Simon, but there are still 2 things that need to be addressed...
(1) I want the sliding time always to be 2.2 sec...
here's my approach to it - just a theory but it might work:
we need a speed that changes dynamically depending on the
distance we have to travel...
I don't know if that applies for Action Scrip but I recall
from 6th grade, that...
speed = distance / time
--> we got the time (which is always 2.2 sec)
--> we got the disctance
(currentposition-finaldestination)
--> this should automatically change the speed to the
appropriate value
Unfortunately I have no clue how the action script would look
like (like I said my action script skills are very limited)...
(2) Also, one other thing I need that is not implemented yet,
is that when the final destination is reached it jumps to a certain
label inside a certain movieclip - every time different for each
button pressed - something like:
if (currentPosition = finalDestination) {
this.large_pics.pic2.gotoAndPlay("s1");
that statement just doesn't work when I put it right under
the function for each button...
Thanx again for taking the time !!!
Mike -
Need help fine tuning my gallery
Hello everybody... first let me post the code and then I'll post the errors and what needs to be done...
XML Code:
<images>
<image src="images/image1.jpg" title="Jelly 4" url="images/image1.jpg" />
<image src="images/image2.jpg" title="Cat" url="images/image2.jpg" />
<image src="images/image3.jpg" title="Statue" url="images/image3.jpg" />
<image src="images/image4.jpg" title="Arch 3" url="images/image4.jpg" />
<image src="images/image5.jpg" title="Penguin" url="images/image5.jpg" />
<image src="images/image6.jpg" title="Jelly" url="images/image6.jpg" />
<image src="images/image7.jpg" title="Statue 2" url="images/image7.jpg" />
<image src="images/image8.jpg" title="Arch 1" url="images/image8.jpg" />
<image src="images/image9.jpg" title="Arch 2" url="images/image9.jpg" />
</images>
AS 3.0 Code:
import gs.*;
import gs.easing.*;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
buildScroller(xmlData.image);
//declaring variables
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 5;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
var thisOne:MovieClip
//build scroller from xml
function buildScroller(imageList:XMLList):void{
for (var item:uint = 0; item < imageList.length(); item++ ) {
thisOne = new MovieClip();
//outline
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect( -1, -1, 82, 82);
blackBox.alpha = thumbFadeOut;
thisOne.addChild(blackBox);
thisOne.blackBox = blackBox;
thisOne.x = thisOne.myx = (80 + padding) * item;
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
//image container
var thisThumb:Sprite = new Sprite();
//add image
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(thisOne.src);
ldr.load(urlReq);
//assign event listeners for Loader
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
thisThumb.addChild(ldr);
thisOne.addChild(thisThumb);
//create listeners for this thumb
thisOne.buttonMode = true;
thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
//add item to the scroller mc
scroller.addChild(thisOne);
scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
function overScrollerItem(e:MouseEvent):void {
//trace("over" + e.currentTarget.name);
TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2} );
TweenMax.to(e.currentTarget.blackBox, 1, { alpha:thumbFadeIn} );
function outScrollerItem(e:MouseEvent):void {
//trace("out" + e.currentTarget.name);
TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0} );
TweenMax.to(e.currentTarget.blackBox, 0.5, { alpha:thumbFadeOut} );
var mcFullImage:MovieClip;
var fullLdr:Loader
function clickScrollerItem(e:MouseEvent):void {
mcFullImage = new MovieClip();
fullLdr = new Loader()
var urlReq:URLRequest = new URLRequest(e.currentTarget.link);
fullLdr.load(urlReq);
fullLdr.contentLoaderInfo.addEventListener(Event.INIT, initHandler)
addChild(mcFullImage);
mcFullImage.x = 100;
mcFullImage.y = 90;
mcFullImage.addChild(fullLdr);
var image:Bitmap = Bitmap(e.target.content);
image.smoothing = true;
function initHandler(e:Event):void
TweenMax.from(fullLdr, 1, {alpha: 0});
mcFullImage.addEventListener(MouseEvent.CLICK, removeImg);
function removeImg(e:MouseEvent):void
TweenMax.to(mcFullImage, 0.2, {alpha: 0, onComplete: unloadImg});
function unloadImg(e:Event):void
removeChild(fullLdr);
fullLdr.unload();
removeChild(mcFullImage);
mcFullImage = null;
function completeHandler(e:Event):void {
//size image into scroller
resizeMe(e.target.loader.parent, 80, 80, true, true, false);
var image:Bitmap = Bitmap(e.target.content);
image.smoothing = true;
TweenMax.to(e.target.loader.parent.parent, 0.5, { alpha:1} );
function errorHandler(e:IOErrorEvent):void {
trace("thumbnail error="+e);
//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
if (centerHor) {
mc.x = (maxW - mc.width) / 2;
if (centerVert){
mc.y = (maxH - mc.height) / 2;
function moveScrollerThumbs(e:Event):void {
if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
else {
speed = 0;
scroller.x += speed;
//scroller limits
if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
scroller.x = -scroller.width + stage.stageWidth - padding;
else if (scroller.x > padding) { //if scrolled to far right
scroller.x = padding;
The problem is that when I click on a thumb it shows up the image nicely, but when I click on the image to close it, I get this error:
ArgumentError: Error #1063: Argument count mismatch on XMLScroller_fla::MainTimeline/unloadImg(). Expected 1, got 0.
at Function/http://adobe.com/AS3/2006/builtin::apply()
at gs::TweenLite/complete()
at gs::TweenMax/complete()
at gs::TweenMax/render()
at gs::TweenLite$/updateAll()
Also, when there's already an image which is loaded, and I click another thumb, a new image loads on top of the one that is already loaded. I tried removing "thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);" in the clickScrollerItem function but it didn't work.... Any suggestions?Now I tried adding a boolean to check whether there's an image that is already loaded to the stage or not and still no luck I really need to fix this, so please someone tell me where did I go wrong...!! here's the code:
import gs.*;
import gs.easing.*;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
buildScroller(xmlData.image);
//declaring variables
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 5;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
var thisOne:MovieClip
var loaded:Boolean = false;
//build scroller from xml
function buildScroller(imageList:XMLList):void{
for (var item:uint = 0; item < imageList.length(); item++ ) {
thisOne = new MovieClip();
//outline
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect( -1, -1, 82, 82);
blackBox.alpha = thumbFadeOut;
thisOne.addChild(blackBox);
thisOne.blackBox = blackBox;
thisOne.x = thisOne.myx = (80 + padding) * item;
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
//image container
var thisThumb:Sprite = new Sprite();
//add image
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(thisOne.src);
ldr.load(urlReq);
//assign event listeners for Loader
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
thisThumb.addChild(ldr);
thisOne.addChild(thisThumb);
//create listeners for this thumb
thisOne.buttonMode = true;
thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
if(loaded == false) {
thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
//add item to the scroller mc
scroller.addChild(thisOne);
scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
function overScrollerItem(e:MouseEvent):void {
//trace("over" + e.currentTarget.name);
TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2} );
TweenMax.to(e.currentTarget.blackBox, 1, { alpha:thumbFadeIn} );
function outScrollerItem(e:MouseEvent):void {
//trace("out" + e.currentTarget.name);
TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0} );
TweenMax.to(e.currentTarget.blackBox, 0.5, { alpha:thumbFadeOut} );
var mcFullImage:MovieClip;
var fullLdr:Loader
function clickScrollerItem(e:MouseEvent):void {
mcFullImage = new MovieClip();
fullLdr = new Loader()
var urlReq:URLRequest = new URLRequest(e.currentTarget.link);
fullLdr.load(urlReq);
fullLdr.contentLoaderInfo.addEventListener(Event.INIT, initHandler)
addChild(mcFullImage);
mcFullImage.x = 100;
mcFullImage.y = 90;
mcFullImage.addChild(fullLdr);
var image:Bitmap = Bitmap(e.target.content);
image.smoothing = true;
loaded = true;
function initHandler(e:Event):void
TweenMax.from(fullLdr, 1, {alpha: 0});
mcFullImage.addEventListener(MouseEvent.CLICK, removeImg);
function removeImg(e:MouseEvent):void
TweenMax.to(mcFullImage, 0.2, {alpha: 0, onComplete: unloadImg});
function unloadImg():void
mcFullImage.removeChild(fullLdr);
fullLdr.unload();
removeChild(mcFullImage);
mcFullImage = null;
loaded = false;
function completeHandler(e:Event):void {
//size image into scroller
resizeMe(e.target.loader.parent, 80, 80, true, true, false);
var image:Bitmap = Bitmap(e.target.content);
image.smoothing = true;
TweenMax.to(e.target.loader.parent.parent, 0.5, { alpha:1} );
function errorHandler(e:IOErrorEvent):void {
trace("thumbnail error="+e);
//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
if (centerHor) {
mc.x = (maxW - mc.width) / 2;
if (centerVert){
mc.y = (maxH - mc.height) / 2;
function moveScrollerThumbs(e:Event):void {
if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
else {
speed = 0;
scroller.x += speed;
//scroller limits
if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
scroller.x = -scroller.width + stage.stageWidth - padding;
else if (scroller.x > padding) { //if scrolled to far right
scroller.x = padding; -
Cycle images in a thumbnail gallery
Hi, I'm very new to HTML, so please bear with me. I'm
currently using a "Thumbnail Gallery" style page for my online
portfolio (when the cursor hovers over a thumbnail the image pops
up to the left of it) Here's a link:
Portfolio
What I'm wondering is, would it be possible to cycle through
several images, when the cursor hovers over a Thumbnail (instead of
just one image for each thumbnail)? I'm thinking of showing several
views of a single model in my 3D section.You could try and combine the code with a slide show like
this one...
http://www.lisajaynedann.co.uk/
If you are not confident about trying to combine the code (I
wouldn't be!) then you could have the page as you have it now, but
require the users to click each thumbnail, instead of hovering to
select the next slide show. By clicking each thumbnail would link
to a new page, carrying the separate slide show.
You could also try and find a script that follows a link on
hover rather than having to click. -
Good morning everyone! I would like to ask how can i subscribe for adobe forms central 11.99$ per month. I am currently here in United Arab Emirates. I really need to use this application cause it will benefit me a lot in my work. Thanks!
Hi,
OK. Following instructions, I've uninstalled the old Flash Player and installed the right one, and videos are now playing. Thanks for pointing me to the other posts on this site. YouTube and other videos are now playing
Some of the videos still play jerkily (they don't stream evenly). A few stream evenly once they've been allowed to buffer fully. (I think I'm using these terrms correctly.) Is this solely caused by low bandwidth, or is there something—an adjustment of some kind—that I can do with Flash Player to have online videos stream evenly, even from the moment I start them?
As I mentioned, to bypass this uneven streaming while watching online, I download the videos and watch them usually using Quicktime Player 7.6.4. Still, they don't always play evenly, but for the most part do.
I've just tested bandwidth and I'm told:
5.63 Bbps Download speed
0.63 Mbps Upload speep
Rafael -
Using xml within thumbnail gallery
I'm creating a portfolio of websites I have designed.
I have it working with classic ASP & XML, but want a
Flash version too.
So far:
1) I have a sliding thumbnail gallery working in Flash MX
(using AS2) whereby clicking on thumbnails loads in a larger view
of the image. These images are screenshots of the websites.
2) I have loaded an xml file which contains locations of
thumbnails & larger images, as well as URL of each website, and
some text to describe each site's content. I am able to loop
through the xml to retrieve the data I need for each site.
I would now like to merge the 2.
i.e. click on thumbnail to slide in the larger image, and
dynamically add the URL and text descriptions for each site.
Can someone just point me in the right direction... I'll then
try to fill in the blanks, and post again with more specific
queries if needed.
Thanks.Hi,
It would be helpful if you added a new unique identifier field to your collection to ensure that the correct record gets updated. In the discussion below, I am assuming you have a collection named Col1 with columns ID, ImageURL and Description.
ImageURL points to the images that get displayed in the gallery. The text in Description is bound to the input text box (named Text1) instances.
Now, set the Behavior > OnChange property of the input text box to: UpdateIf(Col1, ID=ThisItem!ID, {Description:Text1!Text}).
Whenever the input text is changed and you shift focus by clicking anywhere else on the canvas, the OnChange rule gets executed and your collection will be updated with the new text.
Thanks
Robin -
Dear apple,
The governments of Saudi Arabia has changed its weekend from THR&FRI to FRI&SAT,
Therefore the start day of the week became SUN. unfortunately all Iphone user could not adjust this change on their I phones .
So will you please facilitate us on this matter.
RegardsGive apple feedback regarding this.
For a temporary fix, change your region? Get a 3rd party Calendar app that fits your needs?
I assume your current region is set in the photo?
If so, pick a region that has a start day of Sunday. (either historically or known for the present)
Note, with changing your region, it will change the default phone number prefix/country code for new contacts and addresses. (calling and SMS is not affected)
Maybe you are looking for
-
What adapter should I use to connect my MacBook Pro to my VGA monitor?
-
HT5460 What is the difference between an OSX upgrade and an OSX Combo upgrade?
That's my question, right there in the subject line. Thanks! Andy
-
Postfix did not reject as it should
Not sure what happened here. The mail should have been rejected by postfix. Server is configured to reject mail for addressed that don't exist. But this one got through. Jan 16 22:31:19 server postfix/smtpd[25246]: BBE9222C452: client=h97.183.28.71.i
-
TS1702 I have just installed iso6 and now no apps will open and the iphone will not power down
Help required I have just installed iso6 now the iphone4 will not open any app nor will the phone power down
-
Adjusting the screen rendering in MSIE 11, 10, and 9 running in Win 7 Pro 64-bit architecture
What is the setting to force Microsoft Internet Explorer 11 to stop showing a blank white background which makes radio buttons invisible, the images inside frames invisible, blank video frames, and has not changed no matter how many times I reset to