Spry: Sliding panels - Next/previous buttons

I'm trying to make a horisontal sliding panel with next and
previous buttons. When the user are on the first panel I don't want
to display the previous button, or if the user are on the last
panel, I don't want to display the next button.
How can I check which panel thats active, and how can I get
the last panels ID/number?

var currentPanel =
sp1.getContentPanelIndex(sp1.currentPanel); // Current panel
var firstPanel = 0; // First panel
var lastPanel = sp1.getContentPanels().length - 1; // Last
panel

Similar Messages

Spry Sliding Panels - Next Link

I was hoping that someone might be able to give me a hand in
modifying the sample code for the Spry SlidingPanels from a
dataset.
I'm able to display 4 panels but the "Next" link in the
sample has been designed to show only on the even records rather
than a fixed number. How would I change this code to display the
"Next" link if I'm showing 4 panels instead of the sample's 2
panels?
<div class="panelnav right" spry:if="{ds_RowNumber} % 2 !=
0 && {nextStartIndex} <
{ds_RowCount}"><a href="#"
onclick="sp1.showPanel('p{nextStartIndex}'); return false;">Next
>></a></div>
Thank you!

I need to rework that sample. The way I would make this a bit
easier for folks to adjust would be to make numberOfPanelsPerView
global. So in that example, modify the code that looks like this:
ds1.addObserver({ onPostLoad: function() {
var numberOfPanelsPerView = 2;
So that it looks like this:
var numberOfPanelsPerView = 2;
ds1.addObserver({ onPostLoad: function() {
And then change the markup that looks like this:
spry:if="{ds_RowNumber} % 2 == 0 &&
{prevStartIndex} >= 0"
spry:if="{ds_RowNumber} % 2 != 0 &&
{nextStartIndex} < {ds_RowCount}"
To look like this:
spry:if="{ds_RowNumber} % numberOfPanelsPerView == 0
&& {prevStartIndex} >= 0"
spry:if="{ds_RowNumber} % numberOfPanelsPerView != 0
&& {nextStartIndex} < {ds_RowCount}"
Then it would just be a matter of someone changing
numberOfPanelsPerView to 4:
var numberOfPanelsPerView = 4;
--== Kin ==--

Edit JS on spry sliding panels widget to fix auto panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
    var current = sp1.getCurrentPanel(); // Get the current panel
    var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
    var panelNumber=1; // Give a value to the first panel number
    Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                 if (node.id==current.id){ // The current panel now receives a number
         if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
           if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
        panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.

wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department

Spry Sliding Panel - Timer

I've been working on extending Spry's Sliding Panels to allow
me to set a timer to auto advance to the next panel. Whilst I had
success with a script that targeted a particular element (eg sp1)
it really isn't terribly useful to have to recode per panel. So
trying to extend instead. Problem is that I keep getting an error
that says the advanceToNextPanel function doesn't exist. Hoping
someone might be able to point me in the right direction. Code
below:
// Sliding Panel Timer
// Based upon
http://labs.adobe.com/technologies/spry/demos/gallery/gallery.js
and feedback within the Adobe Spry forum
// Extend SlidingPanels to include additional data
Spry.Widget.SlidingPanels.prototype.gPanelShowInterval =
1000; // msecs between panels
Spry.Widget.SlidingPanels.prototype.gPanelShowOn = false;
Spry.Widget.SlidingPanels.prototype.gPanelShowTimer = null;
Spry.Widget.SlidingPanels.prototype.gAutoStartPanelShow =
true;
Spry.Widget.SlidingPanels.prototype.addPanelShowTimer =
function()
if (this.gPanelShowInterval == undefined)
this.gPanelShowInterval = 10000; // msecs between panels
if (this.gAutoStartPanelShow)
this.startPanelShow();
// Kill any previous timer event
Spry.Widget.SlidingPanels.prototype.killPanelShowTimer =
function() {
if (this.gPanelShowTimer)
clearTimeout(this.gPanelShowTimer);
this.gPanelShowTimer = null;
// Display next sliding panel on rotational loop
Spry.Widget.SlidingPanels.prototype.advanceToNextPanel =
function() {
var tPanels = this.getContentPanels().length - 1; // Total
Panels
var cPanel = this.getContentPanelIndex(this.currentPanel);
// Index of currently displayed panel
if (tPanels == cPanel)
this.showFirstPanel(); // Return to the first panel
else
this.showNextPanel(); // Show the next sliding panel
this.setPanelShowTimer();
// Setup timer event to change to next panel
Spry.Widget.SlidingPanels.prototype.setPanelShowTimer =
function() {
this.killPanelShowTimer(); // Kill any previous timer event
this.gPanelShowTimer = setTimeout( function() {
this.gPanelShowTimer = null; this.advanceToNextPanel(); },
this.gPanelShowInterval);
// Start the timed sliding panel
Spry.Widget.SlidingPanels.prototype.startPanelShow =
function() {
this.gPanelShowOn = true;
this.setPanelShowTimer();
};

My previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich

Spry Sliding Panels Question..

Hello,
I'm building a website and want to have a small image gallery page, with Spry Sliding Panels as the framework. Everything was working fine until I realized that in the browser, when I clicked the link to go the next panel, the actual web page itself automatically snaps back up to the top before the panel actually slides. I was wondering how to fix this because the gallery is about halfway down the page, and it looks stupid when the page jumps back up to the top each time. Thanks for your help...

Yes, your panel button code (with my change) should look like this:
         <div class="panelbtn"><a href="javascript:;" onclick="sp1.showFirstPanel(); return false;">1</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p2); return false;">2</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p3); return false;">3</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p4); return false;">4</a></div>
This is what I meant when I said to replace the # with the word javascript:;
Beth

I need a flash tutorial on Iphone style Scrolling Photo Gallery using Next/previous Buttons

Here i have attached two sample Fla files of iphone style scrolling photo gallery using next Previous buttons. Smoothscroller.fla is the original file download from internet and thumbscroll.fla is the one i m trying to make. But i m getting the actionscript error in the movieclip symbol 2 frame 2 actionscript frame. Can anyone work out on my file & send me the easiest tutorial of flash so that i can complete my portfolio project.
Mail me ur tutorials at : [email protected]

Just Google for the Spry photo gallery and you might find
http://cates-associates.net/tutorials/Tutorial-CS3-Spry.html
or even a few others.
Happy Sprying
Ben

Spry sliding panels with tab

Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?

Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image.

Robohelp 10 unable to create next/previous buttons in new TOC folder

Suddenly I'm unable to create next/previous buttons in new TOC folder. I create folder, add pages, go to Browse sequence editor, create new Browse Sequence, generate Multiscreen HTML & when it's through no browse sequence in shown ie no next/previous buttons. Help?

Hi there
Silly question here. If you double-click the Responsive recipe in your Single Source Layouts folder, then click the Content section in the left panel, is/are your Browse Sequence(s) selected?
If not, perhaps that's the problem?
Cheers... Rick

Spry Sliding Panel automatic changes

Hi, is there any way to do sliding panel to change
automatically (without clicking on any link) with some duration,
about 10sec.? I will be appreciate for any help

My previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich

Spry Sliding Panel Problem - Repost

Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
I previously posted but it is in fact not working.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich

quote:
Originally posted by:
kinblas
If you're getting a "Spry is undefined" error, it probably
means that the browser is not finding the JS files you included at
the top of your HTML file. Make sure the path to your JS files are
correct ... you can do this by trying to load the JS files directly
in the URL field at the top of your browser.
--== Kin ==--
if u look at the code.. u will seee:
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
it should be
<script src="SprySlidingPanels.js"
type="text/javascript"></script>

How can i create an album with chose category list and next/previous button

hello guys im working on a project for my uni i finished the whole website but one thing is missing
i need to create a photo album with next and previous button, with choosing a category and inside each category i have like 5 pictures and i can change with the next/previous buttons to see another picture of the same category.
Please see the picture below to see what i mean.
some told me it needs flash but i dont know how to work on it :S so plz if anyone can help me
thank you

Dear Mr. Murphy,
thank you for your help.
Actually i have tried to search for a tutorial and i found that one that was very helpful and gave me the half solution. the part i found and it worked with me is the part of the next and previous buttons and moving from an image to another.
SO the part i still need is the list so when i click on a category i get the pictures of the chosen category, I had the idea of create a flash for each category alone and maybe i will be able to add them all together.
But i guess it's too much work and there must be a way where i can make it all in one flash file.
If you have any idea let me know please, thank you again for your help and i'm trying to search for the AS3 image gallery as you told me.
Regards

Spry Sliding Panel widget

Okay, So I'm dense at times!
I want to try and learn the Spry Sliding Panels. Problem is that it does not appear in my Insert – Spry menu. After reading at Labs it assumes that since I have DW CS4 that it is installed. I can't be that dense.
Yeah, I located the CSS and and JS files online at Adobe. But that sure won't install it into my DW – Insert menu.
Am I really that dense?

To my knowledge it shouldn't appear in the insert menu?
I did the below tutorial to learn all about sliding panels.
The tutorial will show you how to link your js and css files to your html etc, which make the panels work.
http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html

Next / Previous button throwing an error. Please help

I wrote this next previous button code and it is throwing an
error. I don't understand why or what I am missing.
I want it to show 4 records for a page. Here is my code and
the error.
Code:
<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfquery name="feat" datasource="#sitedatasource#"
username="#siteUserID#" password="#sitePassword#" maxRows=4>
SELECT feature.title AS ViewField1, feature.MYFile AS
ViewField2, feature.ID AS ID
FROM feature
</cfquery>
<cflock timeout="2" scope="application"
type="READONLY">
<cfset application.feat=feat>
</cflock>
<cfset MaxRows_feat=4>
<cfset
StartRow_feat=Min((PageNum_feat-1)*MaxRows_feat+1,Max(feat.RecordCount,1))>
<cfset
EndRow_feat=Min(StartRow_feat+MaxRows_feat-1,feat.RecordCount)>
<cfset
TotalPages_feat=Ceiling(feat.RecordCount/MaxRows_feat)>
<cfset QueryString_feat=Iif(CGI.QUERY_STRING NEQ
"",DE("&"&CGI.QUERY_STRING),DE(""))>
<cfset
tempPos=ListContainsNoCase(QueryString_feat,"PageNum_feat=","&")>
<cfif tempPos NEQ 0>
<cfset
QueryString_feat=ListDeleteAt(QueryString_feat,tempPos,"&")>
</cfif>
<cflock timeout="2" scope="application"
type="READONLY"><cfoutput query="feat"
maxrows="4">#ViewField1#</cfoutput></cflock>
<cfif PageNum_feat GT 1>
<a
href="#CurrentPage#?PageNum_feat=#Max(DecrementValue(PageNum_feat),1)##QueryString_feat#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Previous','','../img/previous-over.gif',1)"><img
src="../img/previous.gif" alt="Previous Records" name="Previous"
width="96" height="27" border="0" id="Previous" /></a>
<cfif PageNum_feat LT TotalPages_feat>
<a
href="#CurrentPage#?PageNum_feat=#Min(IncrementValue(PageNum_feat),TotalPages_feat)##Quer yString_feat#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('next','','../img/next-over.gif',1)"><img
src="../img/next.gif" alt="Next Record" name="next" width="96"
height="27" border="0" id="next" /></a>
The Error:
Variable PAGENUM_FEAT is undefined.
The error occurred in
C:\Websites\x9vdzd\feature\featured.cfm: line 8
6 : </cfquery>
7 : <cfset MaxRows_feat=4>
8 : <cfset
StartRow_feat=Min((PageNum_feat-1)*MaxRows_feat+1,Max(feat.RecordCount,1))>
9 : <cfset
EndRow_feat=Min(StartRow_feat+MaxRows_feat-1,feat.RecordCount)>
10 : <cfset
TotalPages_feat=Ceiling(feat.RecordCount/MaxRows_feat)>
I thought I had it defined! What am I missing?
Thanks
Phoenix

that is strange... it should work fine - it does in my tests.
here is somewhat updated & modified code to try. i have
included
comments to try and explain what is being done.
basic logic is as follows:
-form is submitted
-check if file has been selected
-try uploading new file
-if new file upload succeeds, delete old file if it exists
(as part of
updating existing record, as new records obviously would not
have any
old image)
-update/insert record data as necessary
here's the code:
<cfif isdefined("form.feat_OK")>

<cfparam name="fileuploaded" type="boolean"
default="false">
<cfparam name="uploadedfile" default="">
<cfset pathToFile = "c:\websites\x9vdzd\img\feature\">

<cfif len(trim(form.MYFile))>

<cftry>
<cffile Action="upload" filefield="MYFile"
accept="image/gif,
image/jpg, image/jpeg, image/pjpeg"
destination="#pathToFile" nameconflict="MAKEUNIQUE">
<cfset fileuploaded = true>
<cfset uploadedfile = cffile.serverfile>
<cfcatch type="any">

<cfset fileuploaded = false>
<cfset uploadedfile = "">

</cfcatch>
</cftry>
</cfif>
<cfif form.id gt 0>

<cfif fileuploaded is true AND
len(trim(form.oldimage))>
<cfif FileExists(pathToFile & form.oldimage)>
<cffile action="delete" file="#pathToFile &
form.oldimage#">
</cfif>
</cfif>
<cfquery datasource="#sitedatasource#"
username="#siteUserID#"
password="#sitePassword#">
UPDATE feature
SET
feature.title=<cfqueryparam cfsqltype="cf_sql_varchar"
value="#form.title#">,
feature.Body=<cfqueryparam cfsqltype="cf_sql_longvarchar"
value="#form.PDSeditor#">,
feature.MYFile=<cfqueryparam cfsqltype="cf_sql_varchar"
value="#uploadedfile#" null="#NOT fileuploaded#">
WHERE ID = <cfqueryparam value="#form.ID#"
cfsqlType="CF_SQL_INTEGER">
</cfquery>
<cfelse>
<cfquery datasource="#sitedatasource#"
username="#siteUserID#"
password="#sitePassword#">
INSERT INTO feature
(title, body, MYFile)
VALUES
(<cfqueryparam cfsqltype="cf_sql_varchar"
value="#form.title#">,
<cfqueryparam cfsqltype="cf_sql_longvarchar"
value="#form.PDSeditor#">,
<cfqueryparam cfsqltype="cf_sql_varchar"
value="#uploadedfile#"
null="#NOT fileuploaded#">)
</cfquery>
</cfif>

<cflocation url="feature-manager.cfm">
</cfif>
hth
Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com

Next previous button in gallery

Hi guys, been a while, hope everyone is well. I am having a problem implementing a next/previous button on an image once it has been enlarged in my gallery. I have done it in pure as3 but all tutorials seem to use the timeline. I will post my code underneath so you can see what I am up too. The next/previous button should I think be added to the modelClicked function.
From what I understand, I will get a next/previous button and turn them into a button object. I will then delete them from my stage and instantiate them within the class below. I would then add them to the modelClicked function with events tied to them. What should I then do in these events to make it fit in with the code below?
Any advise appreciated,
Cheers
Nick
package classes.models
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.geom.Rectangle;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import flash.net.URLRequest;
    import eu.flashlabs.ui.BasicButton;
    import classes.ui.StateClip;
    import classes.ui.Placeholder;
    import classes.utils.URLUtil;
    import classes.vo.ModelsStates;
    import fl.containers.ScrollPane;
    import fl.controls.ProgressBar;
    import com.greensock.TweenLite;
    public class IndividualModel extends StateClip
        // CONSTANTS
        private static const PADDING_TOP:Number= 28;
        private static const PADDING_LEFT:Number= 50;
        private static const COLS:int= 4;
        private static const ROWS:int= 8;
        private static const GAP_HORIZONTAL:Number= 5;
        private static const GAP_VERTICAL:Number= 5;
        // MEMBER VARIABLES
        private var _data:XML;
        public function get data():XML
            return _data;
        public function set data(value:XML):void
            setData(value);
        private var items:Array;
        private var backBtn:BasicButton;
        private var itemsHolder:MovieClip;
        private var loadIndex:int;
        private var sp:ScrollPane;
        private var clonedBitmap:Bitmap;
        private var originalBitmap:Bitmap;
        private var rect:Rectangle;
        private var screen:Sprite = new Sprite();
        public function IndividualModel()
            super();
            items = [];
            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
        private function addedToStageHandler(event:Event):void
            initChildren();
        private function initChildren():void
            itemsHolder = new MovieClip();
            addChild(itemsHolder);
            sp = getChildByName("mc_pane") as ScrollPane;
            backBtn = getChildByName("btn_back") as BasicButton;
            backBtn.addEventListener(MouseEvent.CLICK, backBtn_clickHandler);
            screen.graphics.beginFill(0x111111, .75);
            screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
            screen.graphics.endFill();
        public function destroy():void
            clearItems();
        // PUBLIC INTERFACE
        // LAYOUT
        private function clearItems():void
            while (items.length > 0)
                var item:ModelsItem = items.pop() as ModelsItem;
                itemsHolder.removeChild(item);
                item.destroy();
        private function populateItems():void
            for (var i:int = 0; i < Math.min(COLS * ROWS, data.picture.length()); i++)
                var item:ModelsItem = new ModelsItem();
                item.data = data.picture[i];
                item.x = PADDING_LEFT + (i % COLS) * (ModelsItem.ITEM_WIDTH + GAP_HORIZONTAL);
                item.y = PADDING_TOP + Math.floor(i / COLS) * (ModelsItem.ITEM_HEIGHT + GAP_VERTICAL);
                /*item.addEventListener(MouseEvent.CLICK, modelClicked);*/
                itemsHolder.addChild(item);
                /*item.mouseEnabled = false;*/
                sp.source = itemsHolder;
                items.push(item);
            sp.verticalScrollPolicy = "on";
            sp.horizontalScrollPolicy = "off";
            sp.update();
        // PICTURE LOADING
        private function loadNextPicture():void
            if (loadIndex < items.length)
                var loader:Loader = new Loader();
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadNextPicture_completeHandler);
                var item:ModelsItem = items[loadIndex] as ModelsItem;
                loader.load(new URLRequest(URLUtil.getURL([email protected]())));
                /*item.mouseEnabled = true;*/
        private function loadNextPicture_completeHandler(event:Event):void
            event.target.removeEventListener(Event.COMPLETE, loadNextPicture_completeHandler);
            ModelsItem(items[loadIndex]).bitmap = event.target.content as Bitmap;
            ModelsItem(items[loadIndex]).addEventListener(MouseEvent.CLICK, modelClicked);
            loadIndex++;
            loadNextPicture();
        // EVENT HANDLERS
        private function backBtn_clickHandler(event:MouseEvent):void
            state = ModelsStates.HIDDEN;
        private function modelClicked(e:MouseEvent):void
            stage.addChild(screen);
            var item:ModelsItem = e.currentTarget as ModelsItem;
            originalBitmap = item.bitmap;
            clonedBitmap = new Bitmap(originalBitmap.bitmapData.clone());
            stage.addChild(clonedBitmap);
            rect = originalBitmap.getBounds(stage);
            clonedBitmap.x = rect.x;
            clonedBitmap.y = rect.y;
            clonedBitmap.width = rect.width;
            clonedBitmap.height = rect.height;
            clonedBitmap.smoothing = true;
            TweenLite.to(clonedBitmap, 1, { x: (stage.stageWidth - originalBitmap.width) / 4, y: (stage.stageHeight - originalBitmap.height) / 6, onComplete:zoomInFinished, scaleX: 1, scaleY: 1 });
        private function zoomInFinished():void
            trace("Zoom In Finished");
            stage.addEventListener(MouseEvent.CLICK, mouseClicked);
        private function mouseClicked(e:MouseEvent):void
            TweenLite.to(clonedBitmap, 1, { x: rect.x, y: rect.y, onComplete:zoomOutFinished, width: rect.width, height: rect.height});
            stage.removeEventListener(MouseEvent.CLICK, mouseClicked);
        private function zoomOutFinished():void
            trace("Mouse Clicked");
            stage.removeChild(screen);
            stage.removeChild(clonedBitmap);
        // GETTERS & SETTERS
        private function setData(value:XML):void
            _data = value;
            clearItems();
            populateItems();
            loadIndex = 0;
            loadNextPicture();
            state = ModelsStates.SHOWN;
        // UTILS
        override protected function animateInComplete():void
            super.animateInComplete();
            switch (state)
                case ModelsStates.SHOWN :
                    break;
                case ModelsStates.HIDDEN :
                    break;

I don't actually know how you're loading your data. It's also very difficult to figure out what's happening in your code, since you're extending Classes you don't show. What I can tell you is that you need to store the data about iterating each collection at the level where it's needed. You may want to look at the composite pattern http://www.as3dp.com/2007/05/composite-pattern-book-part-1/ .
In my opinion, the biggest problem you have is poor separation of concerns--you call things Models that are clearly Views, and because you are storing relevant data in Views rather than simply using your Views to represent data, you're making the task of representing and iterating through your data much harder than it needs to be.
The ideal structure would be a data structure that has data for each thumbnail in some sort of collection, like an Array or Vector. This data structure would only be responsible for storing the data and maintaining a pointer to the currently selected thumbnail. When the pointer changes, the data object dispatches a change event, so Views that care about this pointer can update. Each piece of data could then have a member variable that is one of these collections that manages the correct pointer. That's where the composite pattern comes in.
Now, the task of building your Views becomes much easier. You have one View that gets a collection and shows all the thumbnails and one View that gets a specific thumbnail, mix and match as needed. The Views, again watch the change event and do whatever they need to do when the pointer changes.
At this point, who sets the pointer ceases to matter. It can be inside one of your Views or outside any of your Views--when the pointer changes, the View that is watching that particular collection will update, and if the result of that update is that a nested View then watches a different collection, that's ok--it still follows the same principles.

Creating next/previous buttons problem

I am creating next & previous buttons on my main scene. I have created a scrolling photo gallery as well as a random button to randomly select images. I have a photos layer that has 15 images tagged in the AS "img1" "img2"....hopefully this all makes sense so far.
What script can I use to easily create a next_btn. This is what I currently have
next_btn.onRelease = function() {
    photos.gotoAndStop("img"+1);
    photos.fader.gotoAndPlay(2);
"img"+1 goes to the "img1" however I would like it to go to the next img instead of always go to img1. I've tried _currentframe+10 (images are 10 frames apart) and some others but cannot seem to get it to work.
I would like this to work along with the random button so that when a random image is clicked, the person can click the next button and get to the next image.
Current script in...
random_btn.onRelease = function(){
    var picNum:Number
    picNum = Math.ceil(Math.random()*15);
    photos.gotoAndStop("img"+picNum);
    photos.fader.gotoAndPlay(2);
next_btn.onRelease = function() {
    photos.gotoAndStop("img"+1);
    photos.fader.gotoAndPlay(2);
if you need any clarification let me know! thanks!

i'll try to explain this simplier.
scene 1 (layers)
inside layers
AS
next back btn
random btn
photos
displays images when clicked on from photo gallery
scrolling photo gallery
photo gallery + buttons for gallery
i'm looking to create a simple < > prev and next image buttons.
My current script from above (original post) hasn't worked out.
random_btn.onRelease = function(){
    var picNum:Number
    picNum = Math.ceil(Math.random()*15);
    photos.gotoAndStop("img"+picNum);
    photos.fader.gotoAndPlay(2);
next_btn.onRelease = function() {
    photos.gotoAndStop(picNum+1);
    photos.fader.gotoAndPlay(2);
I'll take out the random_btn if need be to create just a regular next button and previous button. (i'll worry about tracking the scrolling image gallery later...one issue at a time)
Thanks again.

Spry: Sliding panels - Next/previous buttons

Similar Messages

Maybe you are looking for