How to create a grid-gallery ?

I want to create a gallery similar to this one : http://jeretslack.com/
featured on this page: http://www.adobe.com/be_en/products/muse/jeret-slack.html
basically, i want to use the thumbnails as the main images of the gallery (so no lightbox)
When you scroll over the thumbnail, text appears. I have tried numerous times to insert text into the thumbnail, with no success.
Then, once you click on the thumbnail image, it takes you to a gallery with more images.
I have taken the time to go through many tutorials and forums, but haven't found any clear answers. Thank you for your time.

Consider both as separate images i.e. the one that appears on load and the other one that appears on mouse hover. You can create this effect by simply selecting a rectangle tool and fill an image into it (for the Normal state). Then select the rectangle again, switch to the States panel and apply an image (the one with the text) to the Rollover state. Now create as many you like and align them to your liking.
Thanks,
Vinayak

Similar Messages

How to create a grid

Hi Friends,
How to create a Grid, not a form or table.
I want a grid to hold about 10 fields.
so :-
f1 v1 f2 v2
f1 v1 f2 v2
f--fields
v--values
I can get it using simple form ,but it doesnot look like a grid.
I need the look and feel of a grid.
Thanks!

Hi Naveen,
Check http://searchsap.techtarget.com/searchSAP/downloads/SAPPRESS.pdf Section "7.6 Layout managers"
It will give you the most exhaustive description of how to build a grid in WD.
Best tregards, Maksim Rashchynski.

CS6 How to create a photo gallery?

CS6 How to create a photo Gallery?

I like Fancybox2. It's a big improvement over Lightbox & the original Fancybox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles image container**/
#thumbs p {
    float: left;
    width: 180px;
    height: 12.5em;
    margin: 10px 0 0 20px;
    padding: 10px;
    border: 1px solid silver;
    /**rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    /**this styles caption text**/
    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
    color: #666;
    text-align: center;
/**recommend using same size images**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    margin-bottom: 1.5em;
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: ".";
    clear: left;
    font-size: 0px;
    line-height: 0;
    display: block;
    visibility: hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<div id="thumbs"> <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5 </p>
</div>

<h1>Fancybox with Iframe</h1>
<h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>

<script>
$(document).ready(function() {
    $('.fancybox, iframe').fancybox();
</script>
</body>
</html>
Nancy O.

How to create exchange grid in web entry form...

Hi to all,
I am new to HFM..my query is How to create exchange grid in web entry form...i try it a lot but it didn't get the solution...
i did this exchange grid in web grid..any one can share the document or ppt or video clip related to this..which will be helpful for me...
Thanks

Hi...
Its better to create the Exchange Rates in a Data Form than in an Data Grid, so that you can easily Import and Export the form and even can feed the values easily....
Select the POV like in Scenario-Actual,Year-Your particular year,Period-In Period Dimension do not choose any option so that it can be selected in Columns and Rows,View--the same as Period Dimension,Entity-[None],Value-<Entity Currency>,Account-Do Not select ,ICP- [ICP None],Custom 1-[None], Custom 2-[None], Custom 3-[None], Custom 4-[None]...
In Columns Select Scenario -Actual,Period-{[Fourth Generation]},Currency-#USD(Default Currency)
In Rows Select-Account-A#AVGRATE,View-w#Periodic,Currency-C2#EUR
A#AVGRATE.w#Periodic.C2#CFA and so on for rest of the currencies....
and same in the below rows for the Closing Rates---- A#CLORATE.w#Periodic.C2#EUR
A#CLORATE.w#Periodic.C2#CFA
This might help you.....

How to create a Spry Gallery

Sorry for the rudimentary question, but I want to actually create a spry gallery like the one in the demos, but I am lost as to where to start (using Dreamweaver).
Thanks, Don

Hi,
The basis of the photo gallery is a spry master region and a detailregion.
Let's say your spry dataset is called photos.
The thumbnails within the master region are just like something below
<div spry:region="photos">
<div spry:repeat="photos">
<img src="{thumbURL}" spry:setrow="photos"/>
</div>
</div>
and the current image being displayed sits within this markup.
<div spry:detailregion="photos">
<img src="{imageURL}"/>
</div>
When you click on the thumbail it sets the current row of the photos dataset to that of the thumbnail. The detailregion automatically listens for this changes to updates it markup to show the matching full size photo for that row.
You then add some classes or div ids and css to style your photos and you have your basic photo gallery.
If you want to be able to select different galleries then you have different XML datasets for each gallery and on clicking the appropriate link or select item you run code like below
photos.setURL("gallery1.xml");
photos.loadData();
photos.setURL("gallery2.xml");
photos.loadData();
photos.setURL("gallery3.xml");
photos.loadData();
This will reload both the master region (thumbnails) and the detailregion (currently selectedphoto).
For the slideshow effects you just use Spry effects and the setrow functionality triggered via a timer (setInterval) i.e. here's some sample code from one of my pages
function pauseShow()
clearInterval(StartSlideTimer);
Spry.$$("#slideshowPlaying")[0].innerHTML = "";
function startShow()
clearInterval(StartSlideTimer);
StartSlideTimer = setInterval("fadeOutContentThenSetRow()", 6000);
if (shuffle)
Spry.$$("#slideshowPlaying")[0].innerHTML = "<p>You are playing the slideshow in shuffle mode</p>";
You can see the working page here www.thehmc.co.uk/photo.html
Our club pages works with our photos and albums on our Picasa account because that way you don't need to produce the xml, Picasa does that via it's rss feeds.
Feel free to use any of the code I've written in your pages or start with a basic version as I've outlined at the top - that's how the above page started out then I styled it with css and added the fancier stuff once the basics were working.
Regards
Phil

How to create an grid of buttons.

Im trying to create a grid of buttons but for some reason i can see only 2 of them at the same time, but i know they are 9 on stage cause i trace numChildren
Currently i have this:
public class Main extends MovieClip
                    private var myBtn:SimpleButton = new SimpleButton();
                    private var img1:Bitmap=new Bitmap(new active_MouseOut());
                    private var img2:Bitmap=new Bitmap(new active_MouseOver());
                    private var img3:Bitmap=new Bitmap(new notActive_MouseOut());
                    private var img4:Bitmap=new Bitmap(new notActive_MouseOver());
                    private var myArrayContainer:Array = new Array();
                    public function Main()
                              for (var i :int = 0; i < 3; i++)
                                        for (var j:int = 0; j < 3; j++)
                                                  myArrayContainer[j] = new MyButton(img1, img2, img3, img4)
                                                  myArrayContainer[j].x = 0 + i * (myArrayContainer[j].width + 10)
                                                  myArrayContainer[j].y = 0 + j * (myArrayContainer[j].height + 10)
                                                  this.addChild(myArrayContainer[j])
                              trace(numChildren)
active_MouseOut, active_MouseOver, notActive_MouseOut and notActive_MouseOver are simple bitmap Images that have AS linkage
And MyButton class is this
package
          import flash.display.Bitmap;
          import flash.display.MovieClip;
          import flash.display.SimpleButton;
          import flash.events.MouseEvent;
          import flash.utils.getDefinitionByName;
          public class MyButton extends MovieClip
                    private var myBtn:SimpleButton = new SimpleButton();
                    private var image1:Bitmap
                    private var image2:Bitmap
                    private var image3:Bitmap
                    private var image4:Bitmap
                    public function MyButton(active_OutState:Bitmap, active_OverState:Bitmap, notActive_OutState:Bitmap, notActive_OverState:Bitmap)
                              image1 = active_OutState;
                              image2 = active_OverState;
                              image3 = notActive_OutState;
                              image4 = notActive_OverState
                              myBtn.upState = image1;
                              myBtn.overState = image2;
                              myBtn.downState = myBtn.upState;
                              myBtn.hitTestState = myBtn.overState;
                              addChild( myBtn );
                              myBtn.addEventListener(MouseEvent.CLICK, onClick);
                    private function onClick( ev:MouseEvent ):void
                              myBtn.upState = image3;
                              myBtn.overState = image4;
I also want to ask : Can I get the bitmapData to load in the MyButton class with this
private var image1:Bitmap
public function MyButton(mouseState:String)
                               image1_Data = Class(getDefinitionByName( mouseState ));
                              image1 = new Bitmap( image1_Data() )
and in the Main Class to send the name of the image in the library
myArrayContainer[j] = new MyButton( "notActive_MouseOver" )
or I can do this only in/from the Document Class
cause Im trying and it is giving me this
Error #1065: Variable notActive_MouseOver() is not defined.

well Im doing the button-making in the MyButton class cause im trying to create 9 buttons(and every button has a different image and that image has 4 states(clickable-Up, clickable-Over, notClickable-Up, notClickable-Over )).
And this is the only way i figured out how to do it without writing alot of code ()

How to create a photo gallery so photos on the page can be scaled? [was: Flash CS6]

Hello!
I have a schoolproject where I am going to make a photogallery to pur inside a dreamweaver page. I know how to make the actuall gallery, but the difficulty part is that I have to make it so you can scale the photos when they are on the page.
Do anyone know how to do this?

If your page isn't responsive or at least % width, your gallery images can't rescale to layout.
However you could use a modal window like Fancybox that invokes full-sized images when thumbnails are clicked. See this example:
Alt-Web Templates :: CSS Semi-Liquid, Photo Proof Sheet
Nancy O.

No spry menu, how to create a photo gallery?

Ok so I used spry collapsible panels as well as spry widgets to create my photo galleries and slide shows, now that they are gone from CC I do not know what to do?!
I tried using jquery but not sure how to make a slideshow or gallery from it. PLEASE HELP
I am using DW CC latest version

What kind of gallery are you looking for? Sliding? Look at Cycle2
Modal Window (Lightbox)? Look at Fancybox2
Cycle2 Example:
http://alt-web.com/FluidGrid/Fluid2.html
Fancybox2 Example:
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
See Primer for using jQuery Plugins
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O.

How to create a grid like the sample of "profit Centre - Report" use sdk ?

hi
in the grid of "profit Centre - Report", it has a button,if you click it ,it can show the detaildata. it can implement many levels "Expand " and "Collaspe",but it's not implemented by group! i want to know how to implement it by ui dpi or udo .
thanks!

Hi,
You need:
- to know the relevant queries
- to make copies (use GetAsXML) from the relevant system forms to mimick the standard functionality
- to do it via UI API (use Grid and DataTable - then you don't need DI API at all)
Here's some more information on DataTable / Grid:
The UI sample no. 19 shows you how to load data into the Grid - via the DataTable...
You can find an enhanced version of the sample (showing you how to get linked buttons, combo boxes etc) in the Education area on SAP Service Marketplace (SMP): http://service.sap.com/smb/education
Or just try these links (need SMP user account for that...) to download the sample from the Archive of "Live Expert Sessions" (includes a few more things):
http://service.sap.com/~sapidb/011000358700006282762006E.zip
That's the link to the PDF for the session:
http://service.sap.com/~sapidb/011000358700006282742006E.pdf
...and that's the recording:
http://service.sap.com/~sapidb/011000358700006280182006E.wrf
HTH,
Frank

How to create a grid with arrays and booleans?

As part of a bigger project, I'm trying to create a sub-VI which will allow me to move a "cursor" in a 3x3 array.
There should be 2 boolean inputs, one for moving down in the array, and the other for moving to the right. Once the edge of the array has been reached, the "cursor" will start back from the beginning.
I have a vague idea of a 2 dimensional array with LED's. Once "down" has been pressed, the LED corresponding to (0,0) will turn off, turning (0,1) on. Same goes for the "right" button. When "down" is pressed at (0,2), the LED should turn off, and LED (0,0) should turn on.
I'm sure it has something to do with initializing arrays, but i can't seem to find the right way to do it.
Any kind of assistance is much appreciated. Thanks!
Solved!
Go to Solution.

Maybe this will help.
Oh, I just noticed that I could have done the "Clear True" outside of the inner case structure and some other things too, but oh well - it works.
Help the forum when you get help. Click the "Solution?" icon on the reply that answers your
question. Give "Kudos" to replies that help.
Attachments:
grid_png.vi ‏14 KB

How to create a grid based gradient in Illustrator

I created this randomly degenerating "bitmap" gradient by hand in Illustrator. I want to replicate the effect to fill different sized spaces, but not have to do it by hand every time. Any ideas?

Here's one way:
1. Create a 20-pixel tall grayscale file
2. Select the Gradient tool and set the mode to Dissolve
3. Drag a black-to-transparent gradient across the canvas, repeating as necessary to get the density you want
4. Enlarge 2000% or so using Nearest Neighbor interpolation
5. Save the file, place it in Illustrator, and use Image Trace on it

How can I create an image gallery with "next" buttons?

So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.

Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container.

How do you create THIS "grid" in Oracle Forms

Hi,
I am new to Forms. I have to develop a grid very similar to the one shown here.
How can you create the grid in the bottom??
I can't see using any of the standard Oracle toolbox items (like multi-record blocks) for this?
Any help would be greatly appreciated.
Thanks
User 122...

Hi Soofi,
Appreciate your quick response.
In the image, can you see a huge grid?
Grid column headings are days of the week, Mon, Tue, Wed etc.
Grid Rows also have names, like Room, Status and Rm. Type.
Cells have various values in various colors (red, blue, green etc) and signs like ">>".
Can you see that??
My question is, how to create a grid like this in Oracle Forms??? We cannot do it using a multi record block.
So, how have they done it??? The form in the image is an actual Oracle Form from a hotel reservation system.

Creating an image gallery

Hi all,
I am trying to work out how to create an image gallery on a
page whereby there is a set of thumbnails to the side and the
relevant large image opens adjacent to the thumbnails when they are
moused over.
I have done this using the hide/show layers function but the
output appears incosistently in different browsers and/or window
sizes. I had in mind some adaptation of the "swap image" behaviour
that would open the swap in a different position? Or alternatively
making the layers approach display consistently?
The layers version of the page can be
viewed
here
Any suggestions or guidance would be greatly appreciated,
thanks in advance,
Graham

On Thu, 1 Feb 2007 15:25:09 +0000 (UTC), "hydroculture"
<[email protected]> wrote:
>I don't know the answer - wish I did, but I have been
using a substitute where
>I click on the thumbnail - which via a hyperlink takes me
to a page where the
>large image appears. Not as neat as what we both want ,
but gets the same
>effect,
If clicking a thumbnail is an option then this is a better
solution -
a free extension from PVII:
http://www.projectseven.com/tutorials/images/showpic/index.htm
Steve
steve at flyingtigerwebdesign dot com

How to do a video gallery page

Hi everyone
when you create a new page iWeb lets you choose from some preset pages like the homepage, the blog, the video and the photo gallery.
But the video page lets you put one or more videos in just one page.
If you have many videos and you want to divide them in different categories like the photo gallery page do for photos, how can you do it?
If you select the photo gallery and if you put videos instead of photos from your iTunes inside of it, it seems to do the job, but I can't use this trick cause I have not enough hosting space to store the videos, and infact I uploaded them in youtube and with the youtube widget the photo gallery doesn't work and shows nothing...
Did someone know how to create a video gallery page (or something like that) with videos from youtube?
Thanks
Message was edited by: PaoloPhino

This is one way you could do it: PhotoPresenter Animated Slideshow Themes. The thumbnails can be as small as you'd like. This way none of the video files have to load before they play button is selected. Otherwise the page would take forever to load.
How the button is created is described in this demo page: Opening Item in a New, Precisely Sized Window
OR you could use a video jutebox like the one on this page: http://www.holyredeemernorthbend.org/HRWeb/Our_Videos.html.
His tutorial on how to implement it is here: http://www.holyredeemernorthbend.org/HRWeb/jukebox.html.
OT

How to create a grid-gallery ?

Similar Messages

Maybe you are looking for