Adding light box to thumbnail images

HI there
I have been trying to find out how to get images opening up in the main browser, I have been directed to light box, but I am getting very confused with how to create such effect.
I am baiscally trying to get lightbox working when you click a thumbnail image in flash!
would anyone beable to direct me to any tech notes and/or example files on how to do this
many thnks for your help : )

Hi
Are you using compositions ? If yes then you can use one into another by inserting element.
Please provide the page url.
Thanks,
Sanjit

Similar Messages

Light box loads first image everytime

Hello..
I have an issue with a export HTML output of my site... when I click on any of the light box images it always loads the first time regardless of which one I have clicked on... you click off it and click back on to another photo and it works fine...
Its not just the one lightbox... I have quite a few on my site and they all load the first image each time regarless of what you click on...

Please send us the link to your site and your .muse file to [email protected] for further troubleshooting, and also include a link to this forum thread for reference. If your file is larger than 20MB, you can use a service like Adobe SendNow or SendThisFile.
Thanks..

Spry Gallery, adding content box on thumbnail click

I've attached the html for the page I'm working on. Essentially, it's using the spry gallery. Onclick, the main image is updated dynamically, what I also want to happen onclick, is for a separate DIV with some text in it to be updated with new text. I had thought that by editing the photo.xml and simply adding another tag labeled 'dtext' in each photo area, I could refer back to it. While this does work on the initial page load, it doesn't update onclick.
Thoughts
Website can be viewed here: http://www.thesilversandbox.net/purple/purple_gallery.html
uploaded, a .zip file containing the .html and the photo.xml file being used. You'll note on the web page the blue placeholder section is where I'd like the text to appear and in the .xml file you'll see the 'dtext' tag which I'd like to be where I enter the product descriptions that change on thumbnail click.
Thanks,

Can someone comment on this please? Essentially what I'd like to know is if it's possible, using only the Spry Gallery, to add an additional XML comment into the "photo.xml", which contains some text. Then, call this text upon each thumbnail-click event to have a small description appear when the picture changes.
I realize there are content-widgets for this, but they are heavy, all I want is a little comment box, everything else is working properly.
Thoughts?
/bump

Adding client login to light box help

Hi again. I was wondering how i can add a client login to this page. i did published it to adobe BC. But i am trying to figure out how to make the light box secure. now under the test light box i am trying to add the log in. . now once the login is complete then it goes to the box its self. so the client has to login before the click on the light box.
here the page.
Clients
here an example but this site is in list view. i ma looking at thumbnail view
Leo Patrone Photography

The Business Catalyst tag that you want to explore is the {module_isloggedin} tag.
There are many threads on it on the Business Catalyst forums that will probably take you right to the answer you need. Here is also an article that might help you.
Business Catalyst script: show different content logged in users - IT by Mitch

I-movie thumbnail images won't display only a gray box is present

I was working with my i-movie when every thumbnail image in both panes became gray as opposed to having images from the clip. The movies still play fine, but it is impossible to do any editing when you can't see what is in each frame. Any help would be appreciated. Thanks!

You have changed the image URL in the 'image' tag but you have not changed it in the 'itunes:image' tag, and that is what is applicable here.
iTunes is looking for an image at
http://dl.dropbox.com/u/89406141/MilanVineyardChurch.png
and not finding one there. When you have amended the tag with the new URL it will probably take some days before the image appears in the Store.
The new image is apparently at http://dl.dropbox.com/u/89406141/Podcast/MilanVineyardChurch_144.png - this is 144x144 which is inadvisably small for iTunes.
Although your episodes, which have Feedproxy URLs, are appearing OK, iTunes does not get on at all well with Dropbox and you might be advised to consider hosting your image on an ordinary web server. However, it's possible that it will work once you've amended things.

Adding a youtube video light box pop up.

I have been trying to create a lightbox that pops up with a youtube video inside. I have followed Adobe Muse - Lightbox Effect for YouTube Video - YouTube, tutorial to the letter but it doesn't work. And I am completely out of ideas.

I don't have a way at the moment to upload. I tried and had a few others try while watching the video and still the same result. When you go to preview the button is present and does launch a blank lightbox without content(youtube video). The youtube video that was drug into the light box displays all the time unless you select the light box trigger and then the light box pops up over the video. I think what is happening is that the video is not inside the container. I have tried several times selecting the container, button as in video and inserting the <iframe embed code but still have the same result.

Interactive Prototype - How do you simulate light boxes with buttons? (CS4)

I am in the process of mocking up an interactive prototype of the homepage of a web application. On this homepage, there are various links(text with slices) and fields that when clicked on will trigger a dialog to appear over the top of the page similar to a "light box" effect seen on many other websites/applications.
The workflow I am trying to simulate is as follows:
User clicks the text link (state 1)
Dialog appears on top of current page (state 2)
User fills in necessary fields then clicks save button (state 2)
Dialog disappears and returns user to base state (state 1)
The base state of the page is in state 1. I placed the images/content for the light box in state 2 and then added an onclick image swap behavior to have the link in state 1 trigger the light box (also a slice) to appear in state two. That all worked fine until I added a save button symbol from the common library to the lightbox dialog in state 2. When I did that, Fireworks automatically brought be back to state 1 and the button appears on both/all states no matter what I try to do. Also, my attempts to add an onclick behavior to the save button to bring me back to state 1 haven't worked either.
So my questions are:
How do I get that button only to appear on state 2?
The "hotspot" for that button or any slice/hotspot in any state appears active for all states but are only valid for when that certain dialog appears. Is there a way to manipulate button/slice hotspots across states so they are only active in the correct states?
How do I get the Save button to bring me back to the base state?
Mocking up a lightbox type dialog seems like it would be a pretty common thing to do so I am hoping this is just a simple mistake I am making... any help would be greatly appreciated!
Here are some images to help illustrate what I am trying to do:
Desired:
Here is what Fireworks is doing:
State 1 w/link behavior
State 1 with button behavior (this appears on state 1 no matter where I add the button but I want it only to appear in state 2)
State 2
And here is the actual fireworks png proof of concept:

Hi Linda,
Thanks for the suggestion, however, that doesn't appear to be working. I've uploaded the file that I am using as my proof of concept. You can download it via the link below. I changed the button so it's only a graphic with a slice over it but there are still two issues. When the save button is clicked the state does not change back to state 1. The second problem is that even in state 1, the active area for the save button slice in state 2 is still active even though the button is not there. Any thoughts?
https://docs.google.com/leaf?id=0B0Fc5EuxtTzPMzY0NTA4ZGQtZjc1Yi00Njk3LThlOTUtYmFlZWQyNzQ5N GVj&sort=name&layout=list&num=50
Thanks,
Greg

Light Box

I have a thumbnail single image on a page which I would like to open it up in a larger version but in a light box. What is the best way to do this?

"Blank spot"? I think, even the most easy to use software needs a little bit of understanding, practicing and learning..
Try it this way:
1. Place the composition widget "Lightbox display" onto your canvas.
2. Select the second and third thumbnail and delete them.
3. Select the first thumbnail and choose the Fill command in the upper control strip and select an image.
4. Repeat this for all necessery states.
5. Configure the widget using the blue arrow top right of it.:
6. Resize the target area of the wigdet as big as you want.
7. Place an image "into" the target area.
Preview the page in browser.
Too much "palaver" as well? Then please forgive me …

How do I set the thumbnail image of my videos that export to my computer? I'm using Premiere Elements 11 on a windows 8.1 PC 64bit.

How do I set the thumbnail image of my videos that export to my computer? I'm using Premiere Elements 11 on a windows 8.1 PC 64bit.
Or how does Premiere 11 determine where to set the image for the video it is exporting?
I already know how to use Freeze frame and save the image to my computer by Publish+Share/Computer/ Immage.
Thanks,
Mike

Mike
This is not Adobe. Rather user to user. We are all visitors here.
Just a bit of history....back in the days of Premiere Elements 4, you could set a "poster frame" in what was called the Project area. You did this by right clicking a blank area there and, from the drop down menu that appeared, selecting View/Preview Area, and using the poster frame feature there.
As I said, when a video imports into Premiere Elements, the thumbnail of the import has been presenting as the first frame of the video. With this Preview area "poster frame" option, you could set the video's thumbnail in the Project area so that the first frame was another frame in the video. But, this "perk" was restricted to thumbnails of the video in Project area.
If you exported to file with the first frame modified video, the export's thumbnail in Windows Explorer would present with other than the real first frame or the poster frame as the first frame.
Also, in more recent versions, I have observed that the export to file does not display the real first frame of the video in Windows Explorer. Seems random, but I have not kept track.
And, remember, at the onset I wrote
As far as I have ever seen, Premiere Elements Windows uses the first frame of the video for its thumbnail in the program.
I know of no way within Premiere Elements to control what the program opts to do in this matter. In some compatibility
issues, it opts to give no image but a generic one.
I did not say that you can expect to have the Premiere Elements' export file's thumbnail in Windows displaying with its real first frame. And, the more you get into this, depending on the versions, more details need to be added to my comment about "...first frame of video for its thumbnail in the program..."
I would have to look into all this further to get perspective on the contributing factors.
ATR
Add On...The Poster Frame feature appeared in versions 4, 7, 8, and 9 by my count.

Grid or light box type report in SSRS 2012

Hi I am trying to create a grid report like a light box type display in SSRS. I want to display images horizontally across the report and then down. I am using VS 2013. I understand from my searching that this can be done using a matrix control and grouping
using an expression to limit the number of cells displayed across the page (in my case 3) and this works partly. I get a display where my images are off set like below:
data data data
data data data
data data data
I can't work out how to have each row of images progress down the page so that I see each row of three starting from the left and not off set like this:
Data data data
Data data data
data data data
Grateful for your help.

Hi WhyIsItSoHard,
According to your description, you want to display values in a matrix from left to right and each row align to left, right?
In Reporting Services, values in matrix cells display aggregate values scoped to the intersection of the row and column groups to which the cell belongs. If there is no corresponding value for each intersection, it’s possible that the matrix will display
like the first structure you mentioned. In your scenario, if you want to display as the second structure, you could embed the matrix in a list. Please refer to steps below:
1. Query the table except the null values, then create a list and a matrix, then drag the matrix into the list, and delete the first row of the matrix.
2. The final design should look like below. Then preview the report.
Reference:
Lists (Report Builder and SSRS)
If you have any question, please feel free to ask.
Best regards,
Qiuyun Yu
Qiuyun Yu
TechNet Community Support

How can I create a jpeg thumbnail image?

I'd like to create a clear jpeg thumbnail image of the first page of a document created in InDesign. It will be used in Constant Contact as a link to the online version of the document. (Constant Contact doesn't take JPEG's)
I especially need help making it crisp and clear.
Thank you!

And there will be occasions when it's not better, and there are alternative ways to get better results.
You may not have tested every situation and font, but I've done enough to know that sometimes it doesn't work as expected. And it wasn't a "challenge", it was an observation.
Here's 3 ways to make a JPEG - and the one that is the best is the one that was exported to PDF and then opened in Photoshop and then Saved as a JPEG.
.........Direct Export .........................Export PDF................................Export PDF
.....to JPEG.from ID.....................Open in Photoshop.............Save to JPEG from Acrobat.
(EDIT - The forum is adding extra compression to the images - I assure you the middle image is the best)

Thumbnail images - how to

If you click on the link below to one of my website pages, you will notice how some of my News entries have thumbnail picture images by them. I just figured out how they are added and what I was doing wrong. What I need to do is to have someone tell me how to rectify the ones that don't have the thumbnail images.
http://web.mac.com/dfreis/Freis/News/News.html
From what I have learned, you can either delete the picture page holder and drag your own photo in the space left blank, which results in a thumbnail of said picture NOT appearing as a thumbnail on your main archive page or leave the place holder image intact and then drag your picture on top of the image and the thumbnail of your pic WILL show up on the main page.
How do I get the pictures to show up as a thumbnail on the ones I did incorrectly the first time without having to redo the whole page from scrach?
Message was edited by: Freis1968

I am the only one having this problem?

How to display non-URL-based thumbnail images in JTable

I'm trying to display thumbnail images as a tooltip popup for certain cells in a JTable. The thumbnail images are java image objects that have been retrieved dynamically as the result of a separate process--there is no associated URL. For this reason, I can't use the setToolTipText() method of the JTable.
My attempts to JTable's createToolTip() method also failed as it seems the ToolTipManager never calls this method for a JTable.
As a workaround, I've added a MouseMotionListener to the JTable that detects when the mouse is over the desired table cells. However, I'm not sure how to display the popup over the JTable. The only component that I can get to display over the JTable is a JPopupMenu, but I don't want to display a menu--just the image. Can anyone suggest a way to display a small popup image over the table?
Thanks.

Thank You Rodney. This explains why my createToolTip() method wasn't being called, but unfortunately I'm no closer to my goal of displaying a true custom tooltip using a non-URL image rather than a text string. If I make a call to setToolTipText(), at any point, the text argument becomes the tooltip and everything I have tried in createToolTip() has no effect. However, as you pointed out, if I don't call setToolTipText(), the table is not registered with the tooltip manager and createToolTip() is never even called.
To help clarify, I have attached an SSCCE below. Please note that I use a URL image only for testing. In my actual application, the images are available only as Java objects--there are no URLs.
import javax.swing.*;
import java.awt.*;
import java.net.URL;
import java.net.MalformedURLException;
public class Test {
    static Object[][] data = {
            {"Cell 0,0", "Cell 0,1"},
            {"Cell 1,0", "Cell 1,1"}};
    static String[] columnNames = {"Column 0", "Column 1"};
    static JFrame frame;
    static String testImageURLName = "http://l.yimg.com/k/omg/us/img/7c/0a/4009_4182164952.jpg";
    static JTable testTable = new JTable(data, columnNames) {
        public JToolTip createToolTip() {
            System.out.println("testTable.createToolTip() called");
            Image testImage = getTestImage();
            // this.setToolTipText("Table ToolTip Text");
            JLabel customTipLabel = new JLabel(new ImageIcon(testImage));
            customTipLabel.setToolTipText("Custom ToolTip Text");
            JToolTip parentTip = super.createToolTip();
            parentTip.setComponent(customTipLabel);
            return parentTip;
    // This image is loaded from a URL only for test purposes!!!
    // Ordinarily, the image object would come from the application
    // and no URL would be available.
    public static Image getTestImage() {
        try {
            URL iconURL = new URL(testImageURLName);
            ImageIcon icon = new ImageIcon(iconURL);
            return icon.getImage();
        catch (MalformedURLException ex) {
            JOptionPane.showMessageDialog(frame,
                    "Set variable \"testImageName\" to a valid file name");
            System.exit(1);
        return null;
    public static void main(String[] args) throws Exception {
        frame = new JFrame("Test Table");
        frame.setSize(300, 100);
        // Set tool tip text so that table is registered w/ tool tip manager
        testTable.setToolTipText("main tooltip");
        frame.getContentPane().add(testTable);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
}

Adding "loading" movieclip to dynamic image gallery?

Hello again,
I've completed my XML-driven image gallery, however upon live testing I'd realized I made a rookie mistake and not put some kind of placeholder "loading" movie clip loop while the thumbnails—and subsequent full-size images—are being loaded. The images will randomly appear when loaded and I would like to be able to insert a placeholder movie clip while they load, and swap them up with the thumbnails/images after it has been loaded. The placeholder movie clip is in my library (loadingLoop), but I'm having problems getting it to work correctly.
Below is the original function that processes the XML and adds the thumbnail images; this is where I'm trying to insert the placeholder movie clip per XML child node (every attempt I've made just keeps throwing more errors, so I've omitted my attempts to avoid confusion), and I've attached the XML file for testing. And insight or help would be appreciated.
//Locate the external XML file and trigger xmlLoaded when complete
xmlLoader.load(new URLRequest("data/artGallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
//Load the XML and process the image locations
function xmlLoaded(event:Event):void {
 xml = XML(event.target.data);
 //parse the nodes in the XML file
 xmlList = xml.children();
 //count the number of nodes in the XML file via XMLList
 trace(xmlList.length());
 //loop to load all of the thumbnails, based on the number of nodes in XMLList
 //"i" = every child node in the XML file
 for (var i:int = 0; i < xmlList.length(); i++) {
 //Add loadingLoop movie clip per node and wait for thumnail to load before swapping out with imageLoader thumbnail images <-- help!!
 //for every node, create a new instance to be put on stage
 imageLoader = new Loader();
 //load each thumbnail from its location per XML node's "thumb" attribute
 imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
 //position of thumbnail instances per XML node (horizontally across stage)
 imageLoader.x = i * 110 + 10;//thumbs are 100 x 100 so, +10 to the width, plus +10 from left edge
 //imageLoader.y = 10;
 //for each node in XML list, name the instance with the path to the location of the full size image
 imageLoader.name = xmlList[i].attribute("source");
 //for each node in the XML list, add a drop shadow
 imageLoader.filters = [thumbDShadow];
 //add thumbnails to stage
 addChild(imageLoader);
 dropTween = new Tween(imageLoader, "y", Bounce.easeOut, -100, 10, 1, true);
 //set up thumbnails to wait for a click to execute showPicture
 imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
 //set up thumbnails to scale when rolled over
 imageLoader.addEventListener(MouseEvent.ROLL_OVER, sizeUP);

Somehow I had a feeling this wouldn't be a copy-and-paste job for the full-size images. Sorry to be a bother. This is the showPicture function that is fired off when the thumbnail image is clicked (from our previous example). Two errors are thrown:
When the thumnail is clicked:
"Error #2007: Parameter child must be non-null.
 at flash.display::DisplayObjectContainer/removeChild()
 at MethodInfo-51()"
But the full-size image loads nonetheless. The second loading loop (loadingLoop2) is not removed. Below is the showPicture function:
//Load the full-size images and place onto the stage
function showPicture(event:MouseEvent):void {
 //add new movie clip container
 var mc2:MovieClip = new MovieClip();
 addChild(mc2);
 //clear the fullLoader—this is to help clear any full-size images that may already be on the stage (they have two options, click a new thumbnail, or close the current full-size image
 fullLoader.unload();
 //re-create the fullLoader, if there was one cleared
 fullLoader = new Loader();
 //load each full size image from its location per XML node's "source" deliniated by mc.ldr's "source" attribute
 fullLoader.load(new URLRequest(event.target.name));
 //add the loder to the container
 mc2.addChild(fullLoader);
 //create new instance of second loading loop
 mc2.fsloop = new loadingLoop2();
 //add the second loading loop to the container
 mc2.addChild(mc2.fsloop);
 //for each container, add a drop shadow
 mc2.filters = [fullDShadow];
 //set the container's position center on stage, making it the size of the loading loop until the full-size images are loaded
 mc2.x = (stage.stageWidth - mc2.fsloop.width) * 0.5;
 mc2.y = (stage.stageHeight - mc2.fsloop.height) * 0.5;
 //place container on stage
 addChild(mc2);
 //fade in each container
 fadeTween = new Tween(mc2, "alpha", None.easeNone, 0, 1, 0.5, true);
 //check to see if the image has been loaded completely—this is to make sure the image's attributes can be used to re-center on stage and remove fsloop
 fullLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, removeLoop2);
 //set field to multiline so that the HTML tags can be used
 imageTextField.multiline = true;
 //add text frame for description
 imageTextField.x = 10;
 imageTextField.y = 125;
 //for each full-size image, load the description text from the XML child nodes
 for (var j:int = 0; j < xmlList.length(); j++) {
 //check to make sure that the correct full-size image matches the text node when clicked
 if (xmlList[j].attribute("source") == event.target.name) {
 //add each child node as a separate line in the same text field; added HTML tags for CSS application
 imageTextField.htmlText = "" + xmlList[j].child("projectName") + " "
 + "" + xmlList[j].child("toolsUsed") + " "
 + xmlList[j].child("projText") + " "
 + "" + xmlList[j].child("liveURL") + "";
 function removeLoop2(event:Event):void {
 //re-position the container to center on stage to accomodating the full sized image
 mc2.x = (stage.stageWidth - fullLoader.width) * 0.5;
 mc2.y = (stage.stageHeight - fullLoader.height) * 0.5;
 //Add the text field
 addText();
 //hide instructional text, already on stage
 galleryInfo_mc.alpha = 0;
 //remove the full-sized loading loop
 event.target.loader.parent.removeChild(MovieClip(event.target.loader.parent).loadingLoop2 );
 //set up full-size images to "self close" by clicking on it
 mc2.addEventListener(MouseEvent.CLICK, clearStage);
The second error gets thrown when the container is clicked and the function clearStage is executed, which does not remove the container:
"TypeError: Error #2007: Parameter child must be non-null.
 at flash.display::DisplayObjectContainer/removeChild()
 at artGallery_v1_5_fla::MainTimeline/clearStage()"
This is the clearStage function:
//Allow full-size image to "self close" by clikcing on it and removing the text description
function clearStage(event:MouseEvent):void {
 //clear the fullLoader
 fullLoader.unload();
 //remove the container
 event.target.parent.removeChild(MovieClip(event.target.parent).mc2);
 //remove the text field
 removeChild(imageTextField);
 //show the instructional text that is on-stage
 galleryInfo_mc.alpha = 1;
Help!

Displaying thumbnail images in another panel when it mouse clicked

hi,
I am using JAI, what i am trying to do is i am decoding the tiff file and creating thumbnail of that images and adding thumbnail images to one panel and enlarged images to another panel using DisplayJAI. Now when i will click i thumbnail images on left panel then that image should be display to another panel on right side. Adding both panel to JSplit panel.
I have no idia how to do it, i tried to do in different way but not able to do that. I hope anybody can give me the hints about this.
Thanks

i am adding thumbnail of all images in left panel and enlarged view of each thumbnail is added in right panel , and what i require that when i click thumbnail in left side it's corresponding enlarged image should be visible, suppose in right panel page no. 1 is visible and when i click thumbnail of 13 page in left panel that should be in viewport of right panel.You should put your right panel inside a JScrollPane and call [scrollRectToVisible() |http://java.sun.com/javase/6/docs/api/javax/swing/JComponent.html#scrollRectToVisible(java.awt.Rectangle)] from your panel. You can put the rectangles corresponding to enlarged images in a hash map with the keys being some unique attribute of your thumbnails in left panel. That will help in getting the rectangle to make visible, real fast. Or, you can just put the rectangles in some array indexed according to the thumbnails in left panel.
I also want to hide the left panel, i think it's possible by Frame.Yes it is possible, but you said you have both your panels in a split pane, so maybe you can use its setDividerLocation() function to hide your left panel.
Thanks!

Adding light box to thumbnail images

Similar Messages

Maybe you are looking for