Amazon-style jQuery image scroller and IE7
I created a jQuery Amazon image scroller for a web page and it works great—in Firefox, Chrome and Safari. It does not work in Internet Exploder version 7. It does not degrade nicely, it basically "barfs" all over the page.
Can anyone give me an idea of what to do to get this to either degrade nicely in IE7 or display correctly in a Microsoft browser?
Here is the page:
http://www.hollisinternetmarketing.net/patty/patty1.html
If you look at it in Chrome, Firefox or Safari, everything is fine.
I am married to it, because I looked at the other.
I have an issue here, Nancy, where I have someone who is designing the page using Adobe's Illustrator and Photoshop and sending me layered composites. I'm doing a "monkey-see monkey-do" job on this website. And the designer is way impressed, so I have a win here.
Problem is Microsoft's browser. Every other browser I have tested works just fine, shows the Amazon scroller, works perfectly. I now want to personally yell at Steve Ballmer who has been systematically ruining a very good company that Bill Gates and Paul Allen started.
But I'm a little fish.
I have used a conditional to hide the scroller and it hides just fine. But I cannot get rid of the <div> just above it, where I have the nice little "welcome" tab.
Here's what I did:
<style media="all">
<!--[if lte IE 8]>
#centertab {
visibility: hidden;
display: none;
#amazon_scroller {
visibility: hidden;
<![endif]-->
</style>
You will see here that I changed centertab from a Class to an ID. The change was due to the fact that IE7 shows it as a Class, so I figured, maybe, if it's an ID, Internet Exploiter might decide to not show it.
Silly me.
Know how to totally get rid of #centertab with CSS? I thought I was doing all the right stuff. And the #amazon_scroller is successfully gone from Internet Exploiter 7.
Similar Messages
-
I have thumbnails 80px square and a div set at 600px square I select and name a loctor image and put in the div.
When I set up image swap all works fine in Safari, IE8 but in IE7 after the image has swapped, if I move the mouse over or near the large image the image disappears and I get a black 600px size square with a red X in it in the top LH corner, this stays untill I click the next thumbnail. Any help would be appriciated.WilliamDelete line 372 from...wait...move over a little bit so I can see better...uh oh. My crystal ball just went on the fritz again and I can't see your code from here.
Can you provide a link to the problem page?
Mark A. Boyd
Keep-On-Learnin' :-) -
Vertical Image Scroller with ASP and Database
A vertical image scroller where photos (thumbnails) can be
added or deleted with an app using asp and a database.
The scroller would be able to hold unlimited thumbnails. The
thumbnails
would also be buttons used to go to another frame or html
page.
The thumbnails start to scroll down when mouse rollovers top
half of
vertical thumbnail bar and scrolls up when mouse rollovers
bottom half of
bar. Slows and stops in the center of the bar.
Is this possible?Any idea on how to tackle this?
I have created a image scroller and I know how to create a
database and an
application to add records using asp.
But need help on creating a scroller that holds Unlimited
thumbnails in
Flash and adds the images to the thumbnail bar.
Thanks
"SMB" <[email protected]> wrote in message
news:ehc8kg$cud$[email protected]..
>
> "Joe T" <[email protected]> wrote in message
> news:ehankr$g5d$[email protected]..
>> Looking to create a vertical image scroller where
photos (thumbnails) can
>> be added or deleted with an app using asp and a
database.
>> The scroller would be able to hold unlimited
thumbnails. The thumbnails
>> would also be buttons used to go to another frame or
html page.
>> The thumbnails start to scroll down when mouse
rollovers top half of
>> vertical thumbnail bar and scrolls up when mouse
rollovers bottom half of
>> bar. Slows and stops in the center of the bar.
>>
>> Is this possible?
>>
>>
>
> Yes, definatly possible.
> -
does anyone know how to view text in Appleworks, to be able to click on the font button and then be able to scroll thru all the font so that one can see it change as you scroll down the list, at present I have to do it one font style at a time and then repeat? Thanks jl
Welcome to the Apple forums
Your question really belongs in the AppleWorks community/forum.
You can turn on fonts in actual type in the AppleWorks preferences. -
Zooming, scrolling and moving in large images
I'd like to create a document viewer that works like Google Maps or Safari. Basically the "image" of the document is so big that I only want to load parts of it when the user actually goes over to that part of it.
How can I enable zooming, scrolling and moving in "large" images like that?
I looked for a tutorial or sample code, but I wasn't able to find anything.
Any help would be appreciated,
-Chris.I have 4 Gbyte of RAM. I tried to close every applications but the problem remains. You are right about Web Browser problems but unfortunately my problem is related with Finder windows too. I have 800 Mbyte of free RAM.
Another fact I can say to you is that when I move Finder window (or other windows as I wrote before) the area outside the border of the window is repainted not well with puzzle effect. I think the problem is related to desktop refresh and repaint. It seems that graphic acceleration doesn't work for some window!!!! -
I have noticed a number of posting of Flash and IE7 troubles,
but they are not close enough or succinctly worded enough to suit
me to glom onto their post with my problem, and I noticed that the
ones who have a problem similar to mine are not being answered. So,
I take it that there is definitely a problem with Flash and IE7,
but no one knows the answer and Microsoft has not risen to the
problem of dealing with a problem that affects hundreds of
thousands of users. I have posted the following on a Microsoft
forum, but have received no reponses there as of yet. Hopefully the
Flash gurus here will be able to rise to the occasion more quickly
than their Microsoft IE counterparts.
If you look at the home page for
http://www.townofstarprairie.com/
using FireFox or IE 6 (with security settings lowered), you'll
notice a scrolling flash text box at the top, and an exact
duplicate of that text box at the very bottom of the page.
If you use IE 7, the one on top does not show but the one on
the bottom of the page does. These two Flash boxes are identical in
every way.
I have toyed with my IE 7 settings to the point where IE was
screaming at me that the world was going to come to an end due to
my low security settings, and still the one on top does not show.
What ever could be the problem with this?
Thank you for any help you can provide!Nickels55, you are correct....mostly.
One of my acquaintances busted into the weather.com code and
sent me the source. After much trial and error, I found that by
removing the STYLE block completely, I no longer had a problem. I
even tried removing the styles between the STYLE block, but that
didn't work. I had to remove the STYLE tags, too. I tried linking
out to a style page to no avail , btw.
For a while, you can see a bust of this problem at
http://www.townofstarprairie.elitecyberdesign.com/index.cfm?optionid=5877
What's really weird is that this problem only affects the
Flash code ABOVE the Weather.com widget (you would think it would
affect below, but such is not the case), and only in IE 7.
Very strange. -
Create an image scroller with swipe&drag in Edge Animate
Hi folks!
I'm trying to create a image scroller like this one http://www.awwwards.com/demo/touchSwipe-gallery-demo.html.
For the Swipe, I use the wonderful JQuery Plugin TouchSwipe http://labs.rampinteractive.co.uk/touchSwipe/demos/, but for the image sliding I would use the Adobe Edge Animate Timeline.
I know that I can use the Swipe events in Edge Animate to make start or reverse the timeline with pictures, but I would also make working an intermediate "dragging".
My problem, in fact, is: how can I make that - if I've only begun to swipe and I move the finger to left or right without releasing it - my timeline "drag" (or scrubs) frame by frame - like in the example above - until I release the finger?
Many thanks in advance!
DavideHi Elaine!
First, thanks for your prompt answer!
I read the link you gave me: in fact, I was aware - also thanks to Old Tim's posts - about how to create a "scrubber" in Edge Animate, starting from formulas like:
Translation = (positionOfScrubber/WidthOfScrubbing)*timeline;
My problem now is - I fear - more subtle: I can swipe left-right a set of pictures, I can "scrub" a timeline (using for example JqueryUI for the dragging), but I don't know how to put together the swiping and the dragging.
I would that - like in the example from my first post - if, e.g., I completed the swipe left, my timeline would play the animation that shows the pic moving to the left but, if I didn't complete the swiping and I begun dragging to the left, the animation would move with my dragging-finger (the "scrubbing")...
I know is very subtle, but it's how the gallery scrollers works on web and app in mobile devices...
Many thanks for your attention!
Davide -
Styling ScrollBar, three lines on scroller and pressed arrowbutton
Hi,
I've been trying to style some swing components and I am currently working on a scroller. This is my code so far:
ArrayList<Object> gradients = new ArrayList<Object>(5);
gradients.add(0.28f);
gradients.add(0.00f);
gradients.add(new Color(0x362e27));
gradients.add(new Color(0x362e27));
gradients.add(new Color(0x1f1a17));
UIManager.put( "ScrollBar.background", new Color(38,29,21) );
UIManager.put( "ScrollBar.darkShadow", new Color(8,4,1) );
UIManager.put( "ScrollBar.highlight", new Color(80,62,49) );
UIManager.put( "ScrollBar.shadow", new Color(38,29,21) );
UIManager.put( "ScrollBar.thumbShadow", new Color(38,29,21) );
UIManager.put( "ScrollBar.thumbHighlight", new Color(68,58,40) );
UIManager.put( "ScrollBar.gradient", gradients );
UIManager.put( "control", new Color(54,46,39) );And it looks like this:
[http://www.postimage.org/image.php?v=gxzhHBS|http://www.postimage.org/image.php?v=gxzhHBS]
I want to change the color of the three bars on the scrollbar as well as the backgroundcolor of the pressed arrow. I have seen the latter problem somewhere but then the solution was to create a custom scrollbar. It would be convenient if I could skip that.
Any ideas? First post so please lecture me!I'll give this another try. bump.
-
Gallery Demo and IE7 Z-Index Bug
What is the workaround that corrects the problem in IE7
whereby Spry's Grow function shows enlarged images behind (not on
top) of their adjacent micro thumbs. Thanks in advance.I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/ -
Using jquery image gallery - help!
Hello there :)
I'm having an issue with showing images in my jquery image gallery; it's taken me all day and it just won't work. I've tried to follow this tutorial using the latest version of pikachoose 3.0. http://apex-notes.blogspot.com/2008/12/build-image-gallery-using-apex.html
What I see is nothing but broken image links and no jquery image gallery at all. I suspect the problem is with this PL/SQL statement but I am not sure. I use BLOBs for images.
DECLARE
CURSOR c1
IS
SELECT "IMAGE_ID"
FROM "GAL_IMAGES";
BEGIN
HTP.p ('<ul id="pikame">');
FOR gallery_rec IN c1
LOOP
HTP.p
('<li>
<img src="f?p=&APP_ID.:0:&SESSION.:APPLICATION_PROCESS=gallery:::F106_G_IMAGE_ID:'||gallery_rec.image_id||'" /></li>'
END LOOP;
HTP.p ('</ul>');
END; Please help?Thank you for the reply Munky... yes I've included the jQuery in the header, and inspected it with firebug as well. I'm just not very good at interpreting the parameters oracle needs to display BLOB data through PL/SQL commands. No javascript errors, the images just refuse to show. Getting it on apex.oracle.com is tough (lots of stuff to export) but I'll get working on that right away. I'm on limited time too because my project is well overdue :/
Let me show you two screenshots for the time being: http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710612595.jpg and http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710740509.png
I wanted something like this - http://apex.oracle.com/pls/otn/f?p=25110:11:112222201005926 to happen in the 'gallery scroll' region. :/ He gets his to work, I don't know how though, since I followed every step of his blog meticulously.
Again, thanks so much for your reply.
-J -
How do I reposition image scroller bar from middle to the right
I am customising an image thumb scroller. and trying to follow up previously developed code.
All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner.
I can not make the bar move.
My stage size is 1024 x 768
Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand.
Here are the code snippets responsible for the thumbnails build up:
const _THUMB_WIDTH:Number = 50;
const _THUMB_HEIGHT:Number = 64;
const _IMAGE_WIDTH:Number = 860;//550;original #
const _IMAGE_HEIGHT:Number = 500;//355;original #
const _THUMB_GAP:Number = 2;
const _SCROLL_SPEED:Number = 12;
const _SCROLL_AREA:Number = 150;
var _progressBar:MovieClip;
var _arrowLeft:MovieClip;
var _arrowRight:MovieClip;
var _slides:Array;
var _curSlide:Slide; //Slide that is currently displaying
var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.
var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)
var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.
var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.
var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()
_thumbnailsContainer = new Sprite();
addChild(_thumbnailsContainer);
//_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;
_thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails
_thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.
_thumbnailsContainer.visible = false; //ensures nothing is clickable.
var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});
xmlLoader.load();
function _xmlCompleteHandler(event:LoaderEvent):void {
_slides = [];
var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
//loop through each <image /> node and create a Slide object for each.
for each (var image:XML in imageList) {
_slides.push( new Slide(image.@name,
image.@description,
new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
name:image.@name + "Thumb",
width:_THUMB_WIDTH,
height:_THUMB_HEIGHT,
//centerRegistration:true,
//x:260, y:320,//doesn't work here but works in line 69
scaleMode:"proportionalInside",
bgColor:0x000000,
estimatedBytes:13000,
onFail:_imageFailHandler}),
//loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.
function _setupThumbnails():void {
var l:int = _slides.length;
var curX:Number = _THUMB_GAP;
for (var i:int = 0; i < l; i++) {
var thumbnail:Sprite = _slides[i].thumbnail;
_thumbnailsContainer.addChild(thumbnail);
TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);
thumbnail.x = curX;
thumbnail.y = -234;//defines y position of the thumbnails row
curX += _THUMB_WIDTH + _THUMB_GAP;
_minScrollX = _IMAGE_WIDTH - curX;
if (_minScrollX > 0) {
_minScrollX = 0;
function _enterFrameHandler(event:Event):void {
if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
if (this.mouseX < _SCROLL_AREA) {
_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX > 0) { //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below
_destScrollX = 0; //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX < _minScrollX) {
_destScrollX = _minScrollX;
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});Hi, thanks for taking a look at my problem.
I assume that the code was difficult to read due to an unusual line brakes, which somehow I got when pasting on this site.
Please take a look I am pasting the code anew in it entirety:
(please let me know if you would like me to separate the areas which I believe give me troubles to address my previously describe problem:
All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner.
I can not make the bar move.
My stage size is 1024 x 768
Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand.)
(Also wanted to mention that there an external file Slide.as which is not responsible for the construction and positioning of the thumbnails)
import com.greensock.*;
import com.greensock.loading.*;
//import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
//import com.greensock.TweenLite;
import com.greensock.events.LoaderEvent;
//import com.greensock.loading.ImageLoader;
//import com.greensock.loading.SWFLoader;
//import com.greensock.loading.LoaderMax;
//import com.greensock.loading.XMLLoader;
import com.greensock.plugins.AutoAlphaPlugin;
import com.greensock.plugins.ColorTransformPlugin;
import com.greensock.plugins.GlowFilterPlugin;
import com.greensock.plugins.BlurFilterPlugin;//i added this filter to blur the progressBar
import com.greensock.plugins.TweenPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
//public class SlideshowExample extends MovieClip {
const _THUMB_WIDTH:Number = 50;
const _THUMB_HEIGHT:Number = 64;
const _IMAGE_WIDTH:Number = 860;//550;original #
const _IMAGE_HEIGHT:Number = 500;//355;original #
const _THUMB_GAP:Number = 2;
const _SCROLL_SPEED:Number = 12;
const _SCROLL_AREA:Number = 150;
var _progressBar:MovieClip;
var _arrowLeft:MovieClip;
var _arrowRight:MovieClip;
var _slides:Array;
var _curSlide:Slide; //Slide that is currently displaying
var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.
var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)
var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.
var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.
var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()
//function SlideshowExample() {
//super();
//activate the plugins that we'll be using so that TweenLite can tween special properties like filters, colorTransform, and do autoAlpha fades.
TweenPlugin.activate([AutoAlphaPlugin, ColorTransformPlugin, GlowFilterPlugin, BlurFilterPlugin]);//i added BlurFilterPlugin at the end
_progressBar = this.getChildByName("progress_mc") as MovieClip;
_arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip;
_arrowRight = this.getChildByName("arrowRight_mc") as MovieClip;
//////////my additions to make progress bay blurry
TweenLite.to(progress_mc.progressBar_mc.gradientbar_appLoader_mcPopUp_mc, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
TweenLite.to(progress_mc.rectangleGray, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
_arrowLeft.visible = _arrowRight.visible = false;
_imagesContainer = new Sprite();
this.addChildAt(_imagesContainer, 0);
_thumbnailsContainer = new Sprite();
addChild(_thumbnailsContainer);
//_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;
_thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails
_thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.
_thumbnailsContainer.visible = false; //ensures nothing is clickable.
var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});
xmlLoader.load();
function _xmlCompleteHandler(event:LoaderEvent):void {
_slides = [];
var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
//loop through each <image /> node and create a Slide object for each.
for each (var image:XML in imageList) {
_slides.push( new Slide(image.@name,
image.@description,
new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
name:image.@na me + "Thumb",
width:_THUMB_W IDTH,
height:_THUMB_ HEIGHT,
//centerRegist ration:true,
//x:260, y:320,//doesn't work here but works in line 69
scaleMode:"pro portionalInside",
bgColor:0x0000 00,
estimatedBytes :13000,
onFail:_imageF ailHandler}),
new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
name:image.@name + "Image",
width:_IMAGE_WIDTH,
height:_IMAGE_HEIGHT,
//centerRegistration:true,
x:-420, y:-260,
scaleMode:"proportionalInside",
bgColor:0x000000,
estimatedBytes:820000,
onFail:_imageFailHandler})
//now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background.
var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler});
for (var i:int = 0; i < _slides.length; i++) {
initialLoadQueue.append( _slides[i].thumbnailLoader );
initialLoadQueue.append(_slides[0].imageLoader); //make sure the very first full-sized image is loaded initially too.
initialLoadQueue.load();
_setupThumbnails();
function _initialLoadComplete(event:LoaderEvent):void {
//now that the initial load is complete, fade out the progressBar. autoAlpha will automatically set visible to false once alpha hits 0.
TweenLite.to(_progressBar, 0.5, {autoAlpha:0});
//fade in the thumbnails container
TweenLite.to(_thumbnailsContainer, 1, {autoAlpha:1});
_setupArrows();
//setup the ENTER_FRAME listeners that controls the thumbnail scrolling behavior at the bottom
this.stage.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
//now put all the remaining images into a LoaderMax queue that will load them one-at-a-time in the background in the proper order. This can greatly improve the user's experience compared to loading them on demand which forces the user to wait while the next image loads.
var imagesQueue:LoaderMax = new LoaderMax({maxConnections:1});
for (var i:int = 1; i < _slides.length; i++) {
imagesQueue.append( _slides[i].imageLoader );
imagesQueue.load();
//now start the slideshow
_showNext(null);
//loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.
function _setupThumbnails():void {
var l:int = _slides.length;
var curX:Number = _THUMB_GAP;
for (var i:int = 0; i < l; i++) {
var thumbnail:Sprite = _slides[i].thumbnail;
_thumbnailsContainer.addChild(thumbnail);
TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);
thumbnail.x = curX;
thumbnail.y = -234;//defines y position of the thumbnails row
curX += _THUMB_WIDTH + _THUMB_GAP;
_minScrollX = _IMAGE_WIDTH - curX;
if (_minScrollX > 0) {
_minScrollX = 0;
function _setupArrows():void {
_arrowLeft.alpha = _arrowRight.alpha = 0;
_arrowLeft.visible = _arrowRight.visible = true;
_arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
_arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
_arrowLeft.addEventListener(MouseEvent.CLICK, _showPrevious, false, 0, true);
_arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
_arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
_arrowRight.addEventListener(MouseEvent.CLICK, _showNext, false, 0, true);
function _showNext(event:Event=null):void {
//if there's a _loadingSlide we should assume that the next Slide would be AFTER that one. Otherwise just get the one after the _curSlide.
var next:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) + 1 : _slides.indexOf(_curSlide) + 1;
if (next >= _slides.length) {
next = 0;
_requestSlide(_slides[next]);
function _showPrevious(event:Event=null):void {
//if there's a _loadingSlide we should assume that the previous Slide would be BEFORE that one. Otherwise just get the one before the _curSlide.
var prev:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) - 1 : _slides.indexOf(_curSlide) - 1;
if (prev < 0) {
prev = _slides.length - 1;
_requestSlide(_slides[prev]);
function _requestSlide(slide:Slide):void {
if (slide == _curSlide) {
return;
//kill the delayed calls to _showNext so that we start over again with a 5-second wait time.
TweenLite.killTweensOf(_showNext);
if (_loadingSlide != null) {
_cancelPrioritizedSlide(); //the user must have skipped to another Slide and didn't want to wait for the one that was loading.
//if the requested Slide's full-sized image hasn't loaded yet, we need to show the progress bar and wait for it to load.
if (slide.imageLoader.progress != 1) {
_prioritizeSlide(slide);
return;
//fade the old Slide and make sure it's not highlighted anymore as the current Slide.
if (_curSlide != null) {
TweenLite.to(_curSlide.image, 0.5, {autoAlpha:0});
_curSlide.setShowingStatus(false);
_curSlide = slide;
_imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
TweenLite.to(_curSlide.image, 0.5, {autoAlpha:1}); //fade the image in and make sure visible is true.
_curSlide.setShowingStatus(true); //adds an outline to the image indicating that it's the currently showing Slide.
TweenLite.delayedCall(5, _showNext); //create a delayedCall that will call _showNext in 5 seconds.
function _prioritizeSlide(slide:Slide):void {
TweenLite.to(_progressBar, 0.5, {autoAlpha:1}); //show the progress bar
_loadingSlide = slide;
_loadingSlide.imageLoader.addEventListener(LoaderEvent.PROGRESS, _progressHandler);
_loadingSlide.imageLoader.addEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
_loadingSlide.imageLoader.prioritize(true); //when the loader is prioritized, it will jump to the top of any LoaderMax queues that it belongs to, so if another loader is in the process of loading in that queue, it will be canceled and this new one will take over which maximizes bandwidth utilization. Once the _loadingSlide is done loading, the LoaderMax queue(s) will continue loading the rest of their images normally.
function _cancelPrioritizedSlide():void {
TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //hide the progress bar
_loadingSlide.imageLoader.removeEventListener(LoaderEvent.PROGRESS, _progressHandler);
_loadingSlide.imageLoader.removeEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
_loadingSlide = null;
function _completePrioritizedHandler(event:LoaderEvent):void {
var next:Slide = _loadingSlide; //store it in a local variable first because _cancelPrioritizedSlide() will set _loadingSlide to null.
_cancelPrioritizedSlide();
_requestSlide(next);
function _progressHandler(event:LoaderEvent):void {
_progressBar.progressBar_mc.scaleX = event.target.progress;
function _clickThumbnailHandler(event:Event):void {
_requestSlide(event.target as Slide);
function _rollOverArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:1});
function _rollOutArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:0});
function _enterFrameHandler(event:Event):void {
if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
if (this.mouseX < _SCROLL_AREA) {
_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX > 0) { //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below
_destScrollX = 0; //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX < _minScrollX) {
_destScrollX = _minScrollX;
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
//if an image fails to load properly, remove it from the slideshow completely including its thumbnail at the bottom.
function _imageFailHandler(event:LoaderEvent):void {
var slide:Slide;
var i:int = _slides.length;
while (--i > -1) {
slide = _slides[i];
if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) {
slide.dispose();
_slides.splice(i, 1);
_setupThumbnails();
return; -
Adjust image width and position along with browser size automatically.
Hi, I'm trying to place an image at the left edge of browser window, and the image width is 50% of the browser window size. The similar effect can be found on this website. Lenzing Instruments
Notice that as the browser zoom out, the image remains half of the width of browser window and align with the right edge of the browser.
I'm new to Muse. Not sure if it is possible to achieve this effect in Muse. I know Muse can set image 100% width of browser window, but how about 50%, 75% and other user defined proportion?
Any help will be appreciated!Thank you for your reply Sanjit. Could you explain more in details about
Exact responsiveness cannot be achieved but yes with scroll and pin you can create a similar effect
I also followed this post Can you create responsive sites with Adobe Muse? It seems that Muse does not support responsive design very well. So I'm not sure how exactly to get an similar responsive design effect in Muse.
Thanks!
Yinze
Design Engineer
Lawson Hemphill Inc. -
Is there a way to add images , text and button in the individual marquee of a carousel
Is there a way to add images , text and button in the individual marquee of a carousel ?
Write a custom carousel. Usually carousel components are just ULs that use something like jQuery to rotate through the LIs. The foundation carousel component is really just designed for some specific use cases. Generally I would just recommend rolling your own.
-
DIV Style background image not showing
Hey Friends - can anyone take a look at line 136 to show why my background-image is not showing in this DIV Style?
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thanks in advance!
ken d
creative director
grateful creative
www.gratefulcreative.comYou have no width or height set for that element so it can not show an image unless you make the div at least the same size as the image.
<div style="background-image:url(http://www.gratefulcreative.com/Andre_Madiz/images/bottom_text.png);ba ckground-repeat:no-repeat; width:871px; height:483px;">
You may also want to consider adding this to your main css file and giving the div an id which will help you out in the future. -
Preloader not working when image scroller present
Hi:
I designed a .fla that involves a large panoramic image that
I stitched together in PhotoShop, then imported into the library
and made into a movie clip, I then have the movie clip of the
panoramic load into an image scroller (the one in the components
library) on the main timeline so you get the sense you are panning
through the photo. Within the movie clip of the panoramic there are
buttons in it that then call other movie clips to load another
movie clip on top of the image scroller.
code attached to the buttons is:
on(release){
_root.attachMovie("myMovie", "screen",1);
_root.screen._x =10;
_root.screen._y =425;
My issue is the file is so large that I have made created a
preloader.
If I load the movie clip of the panoramic directly onto the
timeline the preloader works fine...
When I try to load the imagescroller that calls the movie
clip my preloader does not work at all...
Does anyone have any ideas?
I will gladly supply you with any code you may need.
Thank you
JanaleseThank you for your information. It worked great as far as...I
could build a preloader and have the movie show up on the screen as
I wanted. Now for problem number two that has developed...
The MovieClipLoader that calls external .swf file. This is a
movie that has an image scroll bar that calls a movie clip that
scrolls a panoramic photo. Within that movie clip of the panoramic
I have buttons that then call other movie clips from the library
using
on(release){
_root.attachMovie("myModelScroll", "screen",1);
_root.screen._x =10;
_root.screen._y =425;
This is an example of what I am doing
I have a panoramic shot that is in an image scroller, that
panoramic is of a group of buildings each building has a button
next to it. Those buttons then call up another movie clip from the
library using the attachMovie clip to show another mini movie clip
of what the building looks like inside, and what the purpose is.
Issue:
The buttons within the movie clip that is loaded into the
image scroller fail to work. If I just load the .swf files into the
browser it works just fine...
but the issue is I have a huge file with an image scroller so
I need a progress bar and a MovieClipLoader function.
How do I now get the other code attached to the buttons
within the movie clip that says attachMovieClip to work within the
context.
I am so baffelled as to why it won't work...
Here is the code to my preloader and movieClipLoader
My actionScript skills are very limited so any help is
greatly appreciated but needs to be supplied in simple language.
Thank you very much
Maybe you are looking for
-
I am new to macbook pro and have msmoney files (mbf) stored on an external harddrive. I want to transfer them to MoneyWiz and need to convert them to qif. Does anyone know of any free software available and how do I do it. Thanks.
-
hello...i'm using labview 8.5 for my final year project..can i convert the graph in the labview into excel file by using this labview version? please...help me....ahaksss Solved! Go to Solution.
-
Hyperion planning cube refresh is taking more time
Hi, My planning application has around 4 cubes/databases as below: Cube A: 1000+ dense members and 500+ sparse members Cube B: 100+ dense members and 400+ sparse members Cube C: 100+ dense members and 600+ sparse members Cube D: 300+ dense members
-
Lib32-ati-dri and lib32-mesa-dri in confilict, can't remove lib32-mesa
I recently reinstalled arch on one of my older computers. And in that installation I installed the open source ati drivers. So I tried to install steam and decided to go ahead and use the lib32-ati-dri for it, it installed for me and everything was
-
After on installation cannot download and install on iMac after installing successfully on Mac Book Pro