Control layout of "Sliding Panels"?

Is there a way to control the layout of the sliding panels slide show theme? I have quite a few photos I'd like to display in a rather short length of time. It is also challenging because the photos are stills I captured from some prior iMovie/iDVDs so the resolution just isn't there. Therefore I'm trying to keep the layouts with the smaller pictures: 3, 4, 5 panels at a time (which look much better) and remove the layout for the single picture, double picture which exposes the poor resolution and doesn't let me get as many pictures fit into the time I need.

Thanks Terence, but I didn't ask about the timing of slides. I wanted to know if there is some way to adjust the layout so it only uses the smaller, multi-photo display in the Sliding Panels style. I'm not seeing anything in iPhoto itself, but I'm currently looking at a copy I made of the SlidingPanels.mrbStyle in the root Library > Application Support > iLifeSlideshow > Styles. In the bundle there is a StyleDescription.plist. And I notice there are 15 effect presets. The preset IDs are labeled pretty clearly. I'm thinking maybe if I delete some of the effect presets and rename the style maybe I'll get just the layout elements I need. I guess it is worth a shot unless anyone here knows of some way within iPhoto to select which layouts are used?

Similar Messages

Sliding panel widget controls a la Brightcove website

I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
Thanks in advance for any advice.

Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541

Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Sliding panels adjustment problem - urgent

Hi
i have a div for header and footer and the sliding panels in between. it works but for one thing:
i need to make it so when the inner panels have large contents it will be at that height. so the footer div will be pushed down to make room for the contents. and so, the sliding widgets adgust its height according the contents that is within each inner panel.
how can i make it? it is really urgent.
best regards
derrida

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Sliding Panels Auto Advance w/ Timer

Hi everyone. I'm looking to make my sliding panels advance
with a simple timer. I know this can be done (right?) but can't
find any way to do this. I have text content in my panels (no
images) so the posted example of a gallery doesn't help me much.
I have no problem setting up the panels as I want, I just
want to make them advance every few seconds.
Anyone please help!!
Thanks so much,
Varen Swaab

Instead of creating a custom script, I decided to extend the widget it self. So everything can be controlled from the widget constructor.
Before we get started a small side note:
I would advice to put the changes in a seperate script, and not to modify the current SlidingPanels.js. This way, if you happen to update to Spry 1.7 it will not overwrite the change you made. But if you do not wish to update just paste it in the SprySlidingPanels.js (This saves a HTTP request, resulting in a slightly faster page load, maintainablity vs performance)
The changes allow you specify the following new options in the constructor:
- automatic: true / false [boolean]
turns automatic sliding panels on or off, off by default
- direction: 0 / 1 [number or Spry.forward , Spry.backward if you have SpryEffects included]
direction that panels should automaticly slide to, 1 is forward, 2 is backward
- each: 1000 [number]
time in miliseconds, note I had to name this "each" instead of duration, because duration handles the sliding panel animation duration.
Example constructor:
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { automatic: false, direction: 0, each: 5000 });
It also adds 3 new methods to the sliding panel:
- .start [ sp1.start(); ]
This allows you to start the automatic sliding of the panels, this will also work, if you did not specify automatic in your constructor
- .stop [ sp1.stop(); ]
Stops automatic sliding of the panels
- .setDirection [ sp1.setDirection(1); ]
Sets a new direction for the sliding panels, requires the same values as you can specify in the sliding panels constructor
The new code:
// line 121 of SprySlidingPanels.js
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
     var ele = this.element;
     if (!ele)
          return;
     if (this.enableKeyboardNavigation)
          var focusEle = null;
          var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
          if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
               focusEle = ele;
          if (focusEle)
               var self = this;
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
     if (this.currentPanel)
          // Temporarily turn off animation when showing the
          // initial panel.
          var ea = this.enableAnimation;
          this.enableAnimation = false;
          this.showPanel(this.currentPanel);
          this.enableAnimation = ea;
     if (this.automatic){
          this.start();
// These are all new methods
Spry.Widget.SlidingPanels.prototype.start = function(){
     var self = this; // reference to this, so we can use it inside our function
     this.automaticStarted = setInterval(function(){
               var panels = self.getContentPanels(),
                    panelcount = panels.length,
                    current = self.getCurrentPanel(),
                    newpanel;
               // locate the current panel index, and check if we need to increase or decrease the panel
               for(var i = 0; i < panelcount; i++){
                    if(panels[i] == current){
                         self.direction == 1 ? (i++) : (i--);
                         self.showPanel( self.direction == 1 ? (i >= panels.length ? 0 : i) : (i < 0 ? panels.length -1 : i));
                         break; // stop looping, we already found and are displaying our new panel
     }, this.each || 3000);
Spry.Widget.SlidingPanels.prototype.stop = function(){
     if(this.automaticStarted && typeof this.automaticStarted == 'number'){
          clearInterval(this.automaticStarted);
          this.automaticStarted = null;
Spry.Widget.SlidingPanels.prototype.setDirection = function(direction){
     this.direction = direction;
Hopes this helps

Maintain Spry Sliding Panel Focus once a Form has been submitted - DW CS5

I have a web page with 6 sliding panels.
The last panel has an email form.
Everything functions fine except for one item:
Once a user hits the Submit button on the form in the last panel the panels slide back to the first (0-default) panel.
How would I go about maintaining focus on that last panel (the one with the form on it) once the submit button is hit so that I can display the confirmation text?
Thanks in advance for any help or tips.

The scripting of a CGI or PHP mail form server side stuff is designed to:
a. open another page with a confirmation of the send or
b. refresh the page where the form is located so it appears as it did before the send.
When you refresh the page outside of a submit function (F5), the page defaults to the first panel because that's the way the script is written. It is neither abrupt nor awkward. It is the correct functioning of the javascript that controls the accordion, or in this case a slider.
You can maybe rewrite that script to prevent it from doing so, but I personally don't know how to.
As was pointed out by Nancy, keeping the form open in the panel, will more likely than not lead to viewers thinking that it didn't go, and they will submit the form multiple times, (thinkiing each time that it didn't work) before getting frustrated and leaving the page and site altogether.
If this is for simply aesthetic reasons, remember that "form follows function". In a choice between what works and what looks good, what works should always take priority. It doesn't matter how nice it looks if it defeats its purpose with the design being flawed.

When transfering tracks across to ipod a sliding panel appears on the right hand side of itunes. after acknowleadging the transfer the panel does not slide back out of the way to alow another transfer.

When transfering tracks to an ipod a sliding panel appears on the right hand side of itunes. This allows the selected track to be transfered. After registering this action the panel does not slide back out of the way to allow scrolling and more song selection. Any solutions..Help?

I have an even simpler method. I use MyPublisher to print my books. I select their page layout for a two-page spread, drag and drop the image. DONE! I understand that most people have their favorite places to have work done. I have been extremely pleased with MyPublisher.com, so I haven't even tried the book module in Lightroom.

Is it possible to get one sliding panel to automatically display a web site?

I have a slinding panel widget with 6 content panes. One of the tabs is named "Online Help'. I would like the content pane for that tab to automattically display a form that is on a website.
The 'onclick' that is associated with the "Online Help" tab is calling the sliding panel number. If I repace it with an http address, the other panels continue to display but, that panel displays blank.
I have tried a CSS style tag for the panel that includes the http url in a background attribute. That is not working either.
I made a stab at spry:detailregion, but I don't know if a url can be a prameter in that element.
Does anyone have ideas on what I can try?
Thanks,
meileendougherty

Well, a url can be the contents of a data cell, but it will only give you a link, not the other website.
Although iframes are often considered tricky, I have not had bad luck with them. Put an iframe in your content cell, and use your other website as the source. You will have to give the iframe dimensions, or it will default to 'pretty small'.
Beth

Possible to have two occurences of sliding panels in same location on page?

Hi, any help you guys could give me would be greatly appreciated.
I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
Here's the page I'm working with, with only one of the Content Groups active:
http://www.susanmeyerart.com/redesign/
eta: I'm working with Spry Pre-Release 1.6.1.

I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
This may not work, but, as they say...you don't know until you try!
Beth

How can I control the direction of Panel Page menuTabs (menu1) ?

Hi all,
in ADF FACES - JDeveloper 10.1.3
how can I control the direction of Panel Page menuTabs (menu1) either from left to right or right to left ?
regards,

In the adf-faces-config.xml file you can add a right-to-left tag.
(Right click on the structure window and choose insert inside...)

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

Problem updating a control on one panel based on a value change in another control on a different panel

Hi,
I am trying to update the value of a control on one panel when the value of another control on a different panel is changed. The two panels are saved in two different .uir files, so there are two associated .h files generated by CVI. The problem is that, inside the callback function for the control that is being modified (Ctrl_Id_A on Panel_A), when I call SetCtrlVal(Panel_B, Ctrl_Id_B, Value); 'Panel_B' and 'Ctrl_Id_B' (which have the same numeric values as Panel_A = 1 and Ctrl_Id_A = 2 in their respective .h files) are being interpreted as Panel_A and Ctrl_Id_A. I never understood how CVI makes this distinction, eg. knowing which of PANEL_A = 1 and PANEL_B = 1 is being referred to, but didn't worry about it since I never needed cross-communication between panels until now. Any help on how to implement this would be greatly appreciated. Thanks!
Solved!
Go to Solution.

This is a basic issue on which you can find tons of forum posts
The online help for the function recitates:
int SetCtrlVal (int panelHandle, int controlID, ...);
Parameters
Input
Name
Type
Description
panelHandle
int
Specifier for a particular panel that is currently in memory. You obtain this
handle from LoadPanel, NewPanel, or DuplicatePanel.
controlID
int
The defined constant, located in the .uir header file, that you assigned to the control in the User Interface Editor, or the ID returned by NewCtrl or DuplicateCtrl.
value
New value of the control. The data type of value must match the data type of the control.
That is, you must not use the panel constant name in the first parameter of SetCtrlVal, use the panel handle instead. The system guarantees that all panel handles are unique throughout the whole application whichever is the number of panels used in every moment.
int SetCtrlVal (int panelHandle, int controlID, ...);
Purpose
Sets the value of a control to a value you specify.
When you call SetCtrlVal on a list box or a ring control, SetCtrlVal
sets the current list item to the first item that has the value you
specify. To set the current list item through a zero-based index, use SetCtrlIndex.
When you call SetCtrlVal on a text box, SetCtrlVal appends value to the contents of the text box and scrolls the text box to display value. Use ResetTextBox to replace the contents of the text box with value.
Note This function updates the displayed value immediately. Use SetCtrlAttribute with ATTR_CTRL_VAL to set the control value without immediately updating the displayed value. For this reason, SetCtrlAttribute with ATTR_CTRL_VAL is generally faster than SetCtrlVal. However, if the control in which you are setting the value is the active control in the panel, SetCtrlAttribute with ATTR_CTRL_VAL displays the value immediately.
Note This function is not valid for graph and strip chart controls.
Parameters
Input
Name
Type
Description
panelHandle
int
Specifier for a particular panel that is currently in memory. You obtain this
handle from LoadPanel, NewPanel, or DuplicatePanel.
controlID
int
The defined constant, located in the .uir header file, that you assigned to the control in the User Interface Editor, or the ID returned by NewCtrl or DuplicateCtrl.
value
New value of the control. The data type of value must match the data type of the control.
Proud to use LW/CVI from 3.1 on.
My contributions to the Developer Zone Community
If I have helped you, why not giving me a kudos?

Background image instead of color for each sliding panel

I'm working with sliding panels and trying to add some style to the page. I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser. Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
any help would be great!

Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
I see that you have
<p>
</p><div class="slidingpanelandtab">
    <blockquote>
      <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
    </blockquote>
Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
Beth

How to Create a DVD from sliding Panels Slideshow.

I have the latest MacBook and iLife software.
I have created a 650 picture slideshow in Sliding Panels theme. It is 1.1 GB.
I have tried to (1) export and (2) Create iDVD through "Share". In both cases I get the message that I do not have sufficient Disc space. I have 23GB of available disc space.
I am probably doing something wrong but any CLEAR instructions?
Scottjohnw

Welcome to the Apple Discussions. What system version are you running? As a precursor to trying the following fixes download and reapply the Mac OS X v10.6.3 v1.1 Update (Combo) updater if you're running Snow Leopard or the Mac OS X 10.5.8 Combo Update if you're running Leopard. Follow that with a repair of disk permissions. Then try the export again. If still not working continue with the fixes below:
First delete the iPhoto preference file, com.apple.iPhoto.plist, that resides in your User/Library/Preferences folder and try again.
If that doesn't help backup and launch iPhoto with the Command+Option keys depressed to rebuild the library. Select the last three options.
Click to view full size

Linking to a specific SLIDING panel remotely

I'm trying to link to a specific SLIDING panel (not a tabbed
panel) from a remote link. I'm sure this can be done using
SpryURLUtils.js as I've successfully achieved the result with
tabbed panels. There's not as much online information on doing this
with sliding panels, though, and I've had no luck experimenting on
my own.
Can anyone help?
Here are two example pages of the pages in question:
http://www.studiohyperset.com/sandbox/aafd/impressionist.php
http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm
The user launches the second page from the first and should
be able to get back to the second sliding panel on the first page
by clicking "RETURN." Right now, when the user clicks "RETURN,"
s/he returns to the first slide in the sequence.
Thanks in advance for any help.

http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
Comment 29: David Powers

Control layout of "Sliding Panels"?

Similar Messages

Maybe you are looking for