Adding spry fade effect to thumbnail gallery??
Hi,
I have a gallery page with a set of thumbnail images each linking to a main image.
I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
...so i'm not sure if i can add the onclick events for the fade which is:
onclick="firstFade.start();"
Any ideas how i can get this to work?
Thanks for any help
B
hi, thanks for the reply.
This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
Here's the html:
<div id="left">
<img src="images/jpg25.jpg" title="kawasakigreen">
</div>
<div id="right-gallery">
<div class="gallery">
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_1.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_2.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_3.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_4.jpg" alt=""/>
</a>
</div>
</div>
So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
Thanks
B
Similar Messages
-
When I use spry fade effect I get crisp font.
My page looks like this before fade effect. The letters are smooth.
After fade effect. I get this crisp letters.
Why ??
Thanks in advance.
And sorry about my poor english.Thanks for your help and time.
I wrote the "background-color:#FFF;" css for the object and didn't work.
So I wrote the same css for the parent object and works perfectly.
Thanks again. -
Fade effect bold text in all IEs
I have created the following page
Cnet about
and used the spry fade effect on the section of text at the bottom
below the "A Sampling of what we offer" graphic.
It works fine but in IE6 and IE7 when viewed on an LCD
monitor, the bold blue text looks very choppy. I assume this has to
do with bad handling of opacity in IE. Does anyone know a hack to
fix this?Hi artdoggy,
That is an IE bug with several workarounds. The first
workaround which is much simpler, is to specify a background color
or font on the element that you are fading in. This somehow
triggers IE to avoid this behavior.
The other workaround is to use an effect onPostEffect
observer or finish function to unset the filter function on the
element. You can see sample of how to use an observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
You'll have to do something like this in your observer:
effect.element.style.filter = "";
--== Kin ==-- -
I am looking for assistance with the spry fade effect. i have
a number of divs all with the same class currently being output via
coldfusion on the page.
the plan is that when i mouse over one div, all the other
divs with the same class fade down slightly so the focused div
stands out. the class for the divs is called "box1" for example and
there are 15-17 "boxes" per page. Im fairly sure i have seen this
effect somewhere just cant seem to find it.
can anyone help out with this or point me in the direction of
someone you can? i appreciate spry may not be the best way to
tackle this so any suggestions or advice relating to other libaries
would be great too. (currently using jquery elsewhere in the site)
any assistance will be greatly appreciated,
Cheers, SeanI'm guessing those boxes are the only one with that
className.
So the best and ideal solution would be to include
SpryDOMUtils.js (is included in the labs download package folder
"includes")
Add it to your page.
And do a little change to that File. We are going to extent
the base funtionality of the results so we can apply fade to each
of those elements.
At the bottom of your SpryDOMUtils.js add this:
Spry.$$.Results.fade = function(from,to)
return this.forEach(function(n) {
Spry.Effect.DoFade(n,{from:from, to:
to});});
Now you can do in your js
Spry.$$('.box1').fade(100,60);
And it should fade all boxes with the classname .box1 to 60%
O wait. you wanted it on mouse over.. Still include the
SpryDOMUtils.js
but now do:
Spry.$$('.box1').addEventListener('mouseover',function(){Spry.Effect.DoFade(this,{from:100 ,
to:
60});}) -
Fade Effect transparency IE/Firefox
Hi,
I am using the Spry:Fade effect with the image to be faded
constructed in Fireworks. The image has a transparent background
and a rectangle with a feathered edge effect.
The fade works well using Firefox however in Internet
Explorer a substantial part of the feathered edge effect turns
black. This occurs whether the image is either a gif or a png
format.
Any suggestions on what causes this and a fix/workaround.
Thanks,Hi artdoggy,
That is an IE bug with several workarounds. The first
workaround which is much simpler, is to specify a background color
or font on the element that you are fading in. This somehow
triggers IE to avoid this behavior.
The other workaround is to use an effect onPostEffect
observer or finish function to unset the filter function on the
element. You can see sample of how to use an observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
You'll have to do something like this in your observer:
effect.element.style.filter = "";
--== Kin ==-- -
Image rollovers with Spry fade possible?
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.quote:
Originally posted by:
wriggs
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.
Hi, I have no relevant eixperience with the Spry ajax
framework, but it can be solved with
mootools framework easily.
<img src="yourbutton" id="button" onmouseover="fadein();"
onmouseout="fadeout();"/>
<script>
function fadein() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(0.5,1);}
function fadeout() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(1,0.5);}
</script>
Of course you will need to set the 0.5 opacity property via
css.
Regards
Bagi Zoltán -
Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
DanielFor Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don -
Fade Effect Flickering Problem
I have thumbnail gallery that utilizes the fade effect on the
mouseover event. Unfortunately, if the user mouses over the
thumbnails too quickly, the images flicker quite horribly. I was
wondering if there was a way to remove this problem.
Thanks
You can view the gallery
hereHello existdissolve,
Your problem in the gallery has 2 issues:
1. Indeed you discovered a bug that I managed to fix in the
internal version that will be published next week. In the code
below that I will give I will include the work around for the
problem too.
2. Seems that you didn't completely understood the meaning of
the toggle option and I will try to explain you more detailed here.
Basically the toggle option is not controlling the direction of the
running effect as I think you understood. The toggle will not tell
to the effect to run in reverse direction but instead its scope is
to tell the effect that it CAN run in reverse direction.
When you try to animate an element using a link, when you set
the toggle option on, the animation will go between the from and to
values, on the first click, and will go between to and from values
on a second click. This cycle could repeat infinitely.
When you try to achieve this effect using 2 links you'll have
2 implementation solutions:
a. Use the same line of code for both links.
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me Second</a>
You will observe that if you'll click these links in order
the element will appear and then will disappear back.
b. Use 2 non toggling effects with the from and the to
options reversed:
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, false)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
100, 0, false)">Click Me Second</a>
There is however a problem why I am not recommending this
second solution in your case. If you click on the links in the
second example fast enough in their order you'll have a weird
result. The 2 effects are not knowing the other effect is running
so you'll end up with 2 effects that tries to do an opposite action
in the same time on the same element. This is somehow happening in
your case too if you move the mouse over the images fast enough you
can't predict anymore what the result will be.
In this situation you'll have to change a little bit the code
in your page. Right now you have this code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100, 30,
true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
When you change the onmouseover and the onmouseout effects to
match the first solution I explained above you'll result with this
code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade(this, 500, 30, 100, true)"
onmouseout="MM_effectAppearFade(this, 500, 30, 100, true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
You observe that I changed in both effects the target element
from tn{ds_RowID} to the special javascript keyword 'this'. I did
this to overcome the bug I told you about that you discovered in
the SpryEffects.
Let me know if you have further questions on this problem.
Regards,
Cristian MARIN -
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 -
Image rotation with fade effect
I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html> -
Problems with Flash thumbnail gallery
Hi there,
I am an artist trying to remake my website...I have a picture of a window on my homepage. The window is a movie. When clicked on, the window lights turn on and a grid of thumbnail pics appear. Each thumbnail is a movie clip. When a thumbnail is clicked on, the movie plays and a larger image appears over the window. The problem is, the window is still active underneath the large image, so if I click on the large image, I am really clicking on the window movie clip underneath, and the thumbnail grid disappears-starting the window movie clip over. How do I make the window clip inactive after it is initially clicked?
Also, I would like the larger images to end their movie clips after another thumbnail is clicked, so that there aren't large images piled up on top of each other.
Is there anyone that can help?
Thanks in advance!!Hi again,
First off, thanks so much for your continued help...
So, I changed my design a little and format. Now I'm using as3, with Flash CS5.
My thumbnail gallery is still based on the same concept, I want a movie clip of a window to be clicked on that reveals a thumb grid, but now the thumbnail gallery should appear over the window, and the large portfolio images appear in the blank space to the right. I followed a tutorial for the gallery, here's my code on the main timeline:
import flash.events.MouseEvent;
btn1.addEventListener(MouseEvent.CLICK, GetFirstImage)
function GetFirstImage (evt:MouseEvent) {
gotoAndStop("pic1")
import flash.events.MouseEvent;
btn2.addEventListener(MouseEvent.CLICK, GetSecondImage)
function GetSecondImage (evt:MouseEvent) {
gotoAndStop("pic2")
import flash.events.MouseEvent;
btn3.addEventListener(MouseEvent.CLICK, GetThirdImage)
function GetThirdImage (evt:MouseEvent) {
gotoAndStop("pic3")
But now I don't know how to go about adding in the initial movie clip of the window (which when clicked should light up and fade into the thumbnail grid) Right now I just have the gallery set up. How do I set up a movie that contains my gallery?
Sorry if the question is redundant, but as you know, I'm new to actionscript.
Thanks! -
Fade effect applied to HTML panel plus onobtrusive JS
At first, I'm not a programmer, so sorry if I'm not clear as
desirable, and sorry for my English. I'm trying to make fade an
HTMLpanel one a user clicks any of the links I have on my page, I
have 2 sets of links, one one the top called
#tab
and another set
#links_one. My panel works
perfectly, also it has Spry regions, and everything loads
perfectly, I used unobtrusibe JS and it works, but i cant make the
same applying effects. This is some of my code: mainContent is the
div where the panel loads:
quote:
var mainPanel = null;
var Abrir = null;
function InitProductPage()
mainPanel = new Spry.Widget.HTMLPanel("mainContent");
var Abrir = new Spry.Effect.Fade('mainContent',
{toggle:true});
function Apear(){
var obs = {onPostUpdate: function(){Abrir.start();}};
mainPanel.addObserver(obs);
Spry.$$("#tab a").addEventListener("click", function(e)
mainPanel.loadContent(this.href, { id: "mainContent" });
return false;
}, false);
Spry.$$("#links_one a").addEventListener("click",
function(e)
mainPanel.loadContent(this.href);
runIt();
return false;
}, false);
Spry.$$("#links_one a").addEventListener("click",
function(e)
mainPanel.Apear();
return false
},false;
Spry.Utils.addLoadListener(InitProductPage);
Ending I used this samples to make my panel:
http://labs.adobe.com/technologies/spry/articles/best_practices/separating_behavior.html
L=http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_two.html
]http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_two.html
http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_two.html
[/L][
(the beahviour I try to get os when you click this
link--->
http://labs.adobe.com/technologies/spry/samples/htmlpanel/frag-0.htmlThanks
to all.
FlorenciaAnthony,
As Arnout stated, this can help you smooth the fading action
You can change the sliding duration and the frames per second for your
sliding panel:
http://labs.adobe.com/technologies/spry/articles/data_api/apis/sliding_panels.ht ml#options
And as bonus, you can actually specify a transition (by adding the
option: "transition: " in the constructor as well, so you can use the
SpryEffect transitions:
http://labs.adobe.com/technologies/spry/samples/effects/transition_sample.html
Unless I am reading you incorrectly, which happens frequently at my age, the above should help.
Ben -
Example Fade effect for data change?
Is there an example of how to use the fade effect when
transitioning from one record to another in a dataset?
What I have now is causing a blinking. The old data fades
out, new data appears then fades in.
<script type="text/javascript">
<!-- // special effects - Fade in/out -->
var fadePOout = new Spry.Effect.Fade('PO',{duration: 1000,
from: 100, to: 0});
var fadePOin = new Spry.Effect.Fade('PO',{duration: 1000,
from: 0, to: 100});
function observerPO(notificationType, notifier, data) {
if (notificationType == "onPreLoad") {
fadePOout.start();
if (notificationType == "onPostLoad") {
fadePOin.start();
dsPO.addObserver(observerPO);
</script>
REF: Spry 1.5Yes, the example is what I want to happen. Am just not sure
it can work with a pagedview dataset as the master. Tried very hard
to follow your directions; Corrected the code in the
SpryEffects.js. Made the CSS entry for the 'PO' region to have
opacity:0. Copied your code and changed ds1 to my detail dataset
(dsPO) (also tried my master dataset, dsPOrders, out of
frustration). Changed the region name from 'description' to 'PO'
(which is the name of my region to fade in and out). Added
onclick="fadeOutContentThenSetRow('{ds_RowID}');" to the master
dataset record. (Yes, I added it. I still have no clue as to how
changes from the pagedview master dataset can update a detail
dataset, but it does.)
End result is the detail dataset appears as though the CSS
was not read. I know this because I can see spry:state="loading"
graphic. Then the data appears. It then disappears and fades in.
Clicking on a master dataset record repeats the above result.
Via Firebug am able to see that the function
fadeOutContentThenSetRow never runs. The function fadeInContent
runs several times. It appears to run through all events of the
data region twice (Accounting for why the data is seen
twice.) -
How to have smooth fade effect between the two images via XML
I have my xml gallery working fine, all i need is to have a smooth fade effect between the two images, right now they are changing with a jerk. Can somebody help me getting this effect with my code. Any help is much appreciated.
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
link = [];
thumbnails = [];
thumbnailsOn = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
link[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnailsOn[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
thumbnails_fn(i);
firstImage();
loopPlay();
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("data.xml");
thumbnail_mc.attachMovie("prev", "prev_new", 1);
thumbnail_mc.prev_new._x= -20;
thumbnail_mc.prev_new._y= -1;
thumbnail_mc.attachMovie("next", "next_new", 4);
thumbnail_mc.next_new._y= -1;
//thumbnail_mc.next_new._x= -30;
thumbnail_mc.prev_new.onRelease = function() {
prevImage();
thumbnail_mc.next_new.onRelease = function() {
nextImage();
p = 0;
this.onEnterFrame = function() {
filesize = holder.getBytesTotal();
loaded = holder.getBytesLoaded();
//preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (holder._alpha<100) {
holder._alpha += 10;
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
holder._alpha = 0;
holder.loadMovie(image[p], 1000);
//desc_txt.text = description[p];
picture_num();
click._alpha=0;
click.onRelease = function() {
getURL(link[p], "_blank");
loopStop();
function HoldImage() {
nextImage();
clearInterval(myTimer2);
loopPlay();
function checkImageState() {
if (p==total-1) {
p = -1;
if (loaded==filesize) {
clearInterval(myTimer1);
myTimer2 = setInterval(HoldImage,3000);
function loopPlay() {
myTimer1 = setInterval(checkImageState, 3000);
function loopStop() {
clearInterval(myTimer1);
clearInterval(myTimer2);
function prevImage() {
if (p>0) {
p--;
holder._alpha = 0;
holder.loadMovie(image[p], 1000);
target_mc._alpha = 40;
picture_num();
function firstImage() {
if (loaded == filesize) {
holder._alpha = 0;
holder.loadMovie(image[0], 1000);
picture_num();
function picture_num() {
current_pos = p+1;
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = (target_mc._width+10)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
target_mc.onRollOver = function() {
this._alpha = 40;
target_mc.onRollOut = function() {
this._alpha = 100;
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);I have a center of energy program similar to the one used by IMAQ. I have attached an example using your data. I first found the center of the entire image. Then I split the array in two and found the centers of each half. That gives you the position of the two spots. This program won't work if the spots are too close to each other or are separeted in the other axis.
Attachments:
distance between two spots one direction.vi 1096 KB
Center of energy calc.vi 40 KB -
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.
Maybe you are looking for
-
My ipod touch has a cracked screen.how can i fix it?
my screen is cracked and i just want to fix it cheaply but professionally,if possible? need help soon!
-
Making a call to a Business Connector Flow Service from within an ABAP prog
Hello, I am trying to make a change to one of the flow services within BUsiness COnnector. The way the system is currently set up is that the flow service is called from within an ABAP program via an RFC call. A remote FM exists in SAP and this is ca
-
When I try to print from a web page using Firefox, the page usually does not print in the correct format and I always get extra blank pages. Usually the first page that comes out it blank. I'm using a HP d135 All-in-one printer. This problem does not
-
Differend between JAZN and Dynamic Credentials
Please dose someone hase an article about this?? I want a clear article where it describes the differend between these two. thank you
-
Windows 8.1 Start up customisation of mouse colour and background
Hey Im trying to change the default colour of the mouse from white to black and the background for bespoke user with eye sight issues anyone got any ideas on how this could be done ? (pre login window)