+1
Answered

Creating a more in depth gallery

JohnWeez 8 years ago updated by icahill (Administrator) 8 years ago 10
Using and trying to stack different galleries and sets of tiles vertically. Basically have the simple gallery that scrolls through tiles side to side but also be able to scroll down to another set of tiles. Cant seem to figure it out...
P.s. when I ad a action and try and launch it on fusebox the whole app closes
This is probably happening because of an error in overlapping concepts in the WIRE. We are working hard on a debugging tool that will guide you to the issue. Look for that down the line.
Try using nested pagers, this should get you close to what you want to accomplish:



<wire>

<main>
<pager name="main" alias="MAIN" width="100%" height="100%" orientation="vertical" align="center" valign="center" paginate="yes">
<pager name="2" alias="ONE" width="100%" height="50%" orientation="horizontal" align="center" valign="top" paginate="yes" onscrollto="load1">
<image name="1" width="50%" height="50%" source="pic1.png" suppress="yes"></image>
<image name="2" width="50%" height="50%" source="pic2.png" suppress="yes"></image>
<image name="3" width="50%" height="50%" source="pic3.png" suppress="yes"></image>
</pager>
<pager name="1" alias="TWO" width="100%" height="50%" orientation="horizontal" align="center" valign="bottom" paginate="yes" onscrollto="load2">
<image name="1" width="50%" height="50%" source="pic4.png" suppress="yes"></image>
<image name="2" width="50%" height="50%" source="pic5.png" suppress="yes"></image>
<image name="3" width="50%" height="50%" source="pic6.png" suppress="yes"></image>
</pager>

</pager>
</main>
<actions>
<action name="oninit" oninit="yes">
<load target="ONE" />
<load target="TWO" />
</action>
<action name="load2">
<sync loop="no" startdelay="0">
<load target="TWO" />
<unload target="ONE" />
</sync>
</action>
<action name="load1">
<sync loop="no" startdelay="0">
<load target="ONE" />
<unload target="TWO" />
</sync>
</action>

</actions>
</wire>
It is important to suppress your images and use load actions. This will help manage your App memory.
alright this is what I have so far. as you can see theres some mp3 files on my second gallery, what actions do I have to add/remove to get them to play?



<wire>
<main>
<panel name="pictures" width="100%" height="100%">
<pager name="main" alias="MAIN" width="100%" height="100%" orientation="vertical" align="center" valign="center" paginate="yes">
<pager name="2" alias="ONE" width="100%" height="100%" orientation="horizontal" align="center" valign="top" paginate="yes" onscrollto="load1">
<gallery name="flow" scale=".6" align="center" valign="center" height="400" width="700">
<tile source="images/im_rich_bitch_300-thumb-300x243.jpg"/>
<tile source="images/big bird.png"/>
<tile source="images/3.png"/>
<tile source="images/NF.png"/>
<tile source="images/Picture 17.png"/>
</gallery>
</pager>

<pager name="1" alias="TWO" width="100%" height="50%" orientation="horizontal" align="center" valign="bottom" paginate="yes" onscrollto="load2">
<panel name="music" width="100%" height="100%" background="000000">
<gallery name="flow" scale=".6" align="center" valign="center" height="400" width="700">
<tile source="Music/05 Dice of Life.mp3"/>
<tile source="Music/08 Heart of the City (Ain_t No Love).mp3"/>
<tile source="Music/09 ASAP Rocky-Keep It G Feat Chace Infinite Spaceghost Purrp Prod By Spaceghost Purrp.mp3 "/>
<tile source="Music/15 Why Can_t I Touch It.mp3"/>
<tile source="Music/C.R.E.A.M.mp3"/>
</gallery>

</pager>
</pager>
</panel>
</main>
<actions>
<action name="oninit" oninit="yes">
<load target="ONE" />
<load target="TWO" />
</action>
<action name="load2">
<sync loop="no" startdelay="0">
<load target="TWO" />
<unload target="ONE" />
</sync>
</action>
<action name="load1">
<sync loop="no" startdelay="0">
<load target="ONE" />
<unload target="TWO" />
</sync>
</action>
</actions>
</wire>

Unfortunately, the gallery and tile tags you are using are reserved only for images.

To accomplish what you desire, your second pager will have to contain a series of images or panels to represent a "play" button. On that play object you can put an onclickup attribute that will trigger a sound action tag.



<wire>
<main>
<pager name="1" alias="TWO" width="100%" height="50%" orientation="horizontal" align="center" valign="bottom" paginate="yes" onscrollto="load2">
<image name="1" source="play.png" onclickup="audioPlay" _sound="Music/05 Dice of Life"></image>
<image name="2" source="play.png" onclickup="audioPlay" _sound="Music/Song2"></image>
<image name="3" source="play.png" onclickup="audioPlay" _sound="Music/Song3"></image>
<image name="4" source="play.png" onclickup="audioPlay" _sound="Music/Song4"></image>
</pager>
</main>
<actions>
<action name="audioPlay">
<set onclickup="audioStop" />
<play anim="clip" _action="play" _source="_sound" _type="mp3" />
</action>
<action name="audioStop">
<set onclickup="audioPlay" />
<play anim="clip" _action="stop" _source="_sound" _type="mp3" />
</action>
<action name="clip">
<sound action="_action" source="_source" type="_type"/>
</action>
</actions>
</wire>
Can you make this a new community topic please?