Thumbnails gallery

Hi,
I want to create a thumbnail gallery with images loaded in at
run-time. Can an flash actionscript be passed variables at
run-time. I want the actionscript to recieve filename(s) as a
variable so it knows what to display.

Well I don't believe I am confusing . I want thumb pics on
flash. I click on a thumb and the larger pic appears. I don't know
what thumbs to load until I select them from a php script. The php
script hands the flash movie dir of the thumbs.
Loadvars is the one to use .
I am onlt trying to find an example of doing this , else i
can think of 1 myself.
any good tuts around on this?

Similar Messages

Need help making javascript thumbnail gallery function in javascript tab menu

Hello all,
I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work. It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab. In addition, once I click on the "gallery" tab the other tabs stop showing their content. I feel like I am missing something obvious. But I just can't figure out what. If anyone can help I would greatly appreciate it.
Thanks,
Natalie
Below is the code of my whole page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tour template</title>

<link rel="stylesheet" type="text/css" href="MenuFader/style.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
        $(function(){
            $("#tour-button").css({
                opacity: 0.3
            $("#gallery-button").css({
                opacity: 0.3
            $("#page-wrap div.button").click(function(){
                $clicked = $(this);
                // if the button is not already "transformed" AND is not animated
                if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                    $clicked.animate({
                        opacity: 1,
                        borderWidth: 5
                    }, 600 );
                    // each button div MUST have a "xx-button" and the target div must have an id "xx"
                    var idToLoad = $clicked.attr("id").split('-');
                    //we search trough the content for the visible div and we fade it out
                    $("#contents").find("div:visible").fadeOut("fast", function(){
                        //once the fade out is completed, we start to fade in the right div
                        $(this).parent().find("#"+idToLoad[0]).fadeIn();
                //we reset the other buttons to default style
                $clicked.siblings(".button").animate({
                    opacity: 0.5,
                    borderWidth: 1
                }, 600 );
</script>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>

<title>Example tour page</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
            document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
<link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">

</head>

<body>
<div id="realtor panel"><table width="100%" border="0">
<tr>
    <td width="18%"> <div align="center"></div></td>
    <td width="82%"> </td>
</tr>
</table>
</div>
<div id="page-wrap">
        <div id="tour-button" class="button">
            <img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
        </div>
        <div id="gallery-button" class="button">
            <img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
        </div>
        <div id="info-button" class="button">
            <img src="MenuFader/images/INFO.png" alt="info" class="button" />
        </div>
        <div id="specs-button" class="button">
            <img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
        </div>
        <div class="clear"></div>
<div id="contents">
    <div id="tour">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
        <param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
        <param name="quality" value="high" />
        <embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
      </object></noscript>
    </div>
    <div id="property gallery">
         <div id="container">
                <div id="gallery" class="content">
                    <div id="controls" class="controls"></div>
                    <div class="slideshow-container">
                        <div id="slideshow" class="slideshow"></div>
                    </div>
                </div>
                <div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">
                        <li>
                            <a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
                            </a>
                       </li>
                      <li>
                            <a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
                            </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/apt sign.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/apt sign.jpg" alt="apt sign" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/entryway1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/living room1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/living1.jpg" alt="living1" />
                          </a>
                      </li>
                       <li>
                             <a class="thumb" href="Gallery/images/example/living room2.jpg" >
                             <img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/living room3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/living3.jpg" alt="living3" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/dining1.jpg" >
                             <img src="Gallery/images/example/Tudor thumbs/dining1.jpg" alt="dining1" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/Dining2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/dining2.jpg" alt="dining2" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/dining3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg" alt="kitchen1" />
                          </a>
                      </li>
                      <li>
                             <a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/bed1.jpg" alt="bed1" />
                          </a>
                      </li>
                       <li>
                             <a class="thumb" href="Gallery/images/example/bedroom2.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/bed2.jpg" alt="bed2" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
                            <img src="Gallery/images/example/Tudor thumbs/bed3.jpg" alt="bed3" />
                          </a>
                      </li>
                        <li>
                             <a class="thumb" href="Gallery/images/example/bathroom.jpg">
                            <img src="Gallery/images/example/Tudor thumbs/bath.jpg" alt="bath" />
                          </a>
                        </li>
                    </ul>
                </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div id="info">
        <p class="style4">Content for info</p>
    </div>
    <div id="specs">
        <p class="style4">This content is for specs.</p>
    </div>
</div>
</div>

<script type="text/javascript">
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '400px', 'float' : 'left'});
                $('div.content').css('display', 'block');
                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity: 1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 15,
                    preloadAhead:              10,
                    enableTopPager:            true,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              '&lsaquo; Previous Photo',
                    nextLinkText:              'Next Photo &rsaquo;',
                    nextPageLinkText:          'Next &rsaquo;',
                    prevPageLinkText:          '&lsaquo; Prev',
                    enableHistory:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
</script>
</body>

</html>

Sure thing:
http://www.acresllc.net/TA501001.html

Problems with Flash thumbnail gallery

Hi there,
I am an artist trying to remake my website...I have a picture of a window on my homepage. The window is a movie. When clicked on, the window lights turn on and a grid of thumbnail pics appear. Each thumbnail is a movie clip. When a thumbnail is clicked on, the movie plays and a larger image appears over the window. The problem is, the window is still active underneath the large image, so if I click on the large image, I am really clicking on the window movie clip underneath, and the thumbnail grid disappears-starting the window movie clip over. How do I make the window clip inactive after it is initially clicked?
Also, I would like the larger images to end their movie clips after another thumbnail is clicked, so that there aren't large images piled up on top of each other.
Is there anyone that can help?
Thanks in advance!!

Hi again,
First off, thanks so much for your continued help...
So, I changed my design a little and format. Now I'm using as3, with Flash CS5.
My thumbnail gallery is still based on the same concept, I want a movie clip of a window to be clicked on that reveals a thumb grid, but now the thumbnail gallery should appear over the window, and the large portfolio images appear in the blank space to the right. I followed a tutorial for the gallery, here's my code on the main timeline:
import flash.events.MouseEvent;
btn1.addEventListener(MouseEvent.CLICK, GetFirstImage)
function GetFirstImage (evt:MouseEvent) {
          gotoAndStop("pic1")
import flash.events.MouseEvent;
btn2.addEventListener(MouseEvent.CLICK, GetSecondImage)
function GetSecondImage (evt:MouseEvent) {
          gotoAndStop("pic2")
import flash.events.MouseEvent;
btn3.addEventListener(MouseEvent.CLICK, GetThirdImage)
function GetThirdImage (evt:MouseEvent) {
          gotoAndStop("pic3")
But now I don't know how to go about adding in the initial movie clip of the window (which when clicked should light up and fade into the thumbnail grid) Right now I just have the gallery set up. How do I set up a movie that contains my gallery?
Sorry if the question is redundant, but as you know, I'm new to actionscript.
Thanks!

Cycle images in a thumbnail gallery

Hi, I'm very new to HTML, so please bear with me. I'm
currently using a "Thumbnail Gallery" style page for my online
portfolio (when the cursor hovers over a thumbnail the image pops
up to the left of it) Here's a link:
Portfolio
What I'm wondering is, would it be possible to cycle through
several images, when the cursor hovers over a Thumbnail (instead of
just one image for each thumbnail)? I'm thinking of showing several
views of a single model in my 3D section.

You could try and combine the code with a slide show like
this one...
http://www.lisajaynedann.co.uk/
If you are not confident about trying to combine the code (I
wouldn't be!) then you could have the page as you have it now, but
require the users to click each thumbnail, instead of hovering to
select the next slide show. By clicking each thumbnail would link
to a new page, carrying the separate slide show.
You could also try and find a script that follows a link on
hover rather than having to click.

Using xml within thumbnail gallery

I'm creating a portfolio of websites I have designed.
I have it working with classic ASP & XML, but want a
Flash version too.
So far:
1) I have a sliding thumbnail gallery working in Flash MX
(using AS2) whereby clicking on thumbnails loads in a larger view
of the image. These images are screenshots of the websites.
2) I have loaded an xml file which contains locations of
thumbnails & larger images, as well as URL of each website, and
some text to describe each site's content. I am able to loop
through the xml to retrieve the data I need for each site.
I would now like to merge the 2.
i.e. click on thumbnail to slide in the larger image, and
dynamically add the URL and text descriptions for each site.
Can someone just point me in the right direction... I'll then
try to fill in the blanks, and post again with more specific
queries if needed.
Thanks.

Hi,
It would be helpful if you added a new unique identifier field to your collection to ensure that the correct record gets updated. In the discussion below, I am assuming you have a collection named Col1 with columns ID, ImageURL and Description.
ImageURL points to the images that get displayed in the gallery. The text in Description is bound to the input text box (named Text1) instances.
Now, set the Behavior > OnChange property of the input text box to: UpdateIf(Col1, ID=ThisItem!ID, {Description:Text1!Text}).
Whenever the input text is changed and you shift focus by clicking anywhere else on the canvas, the OnChange rule gets executed and your collection will be updated with the new text.
Thanks
Robin

How to make a thumbnail gallery page that'll open individual slideshows?

Hi,
I'm trying to make a gallery of thumbnails for album covers I did, and want for it to open its own slideshow (on the same page / as a typical slideshow pop up) when a person clicks on one so he/she can view the main image and a few more thumbnails on its side for other artwork panels (as well as use the arrows if possible).
Anyone got an idea for an easier way to do this?
Thanks! I'm going insane over this... And it seems like this could be the easiest thing, but somehow I can't find a way...
(idem for B and C and so forth)
=

Hi,
That would seem to be the perfect logical answer. But guess what? I've tried this many times without any luck. I MUST be doing something wrong, but simply have no clue what it is. SO I'll describe every tiny step, and maybe you can see where I'm at fault.
1- I drag & drop a Lightbox display from the the composition folder in the Widget library on a blank page.
2- I delete 2 of the 3 default thumbnails from above the main target/container,
3- I select the remaining whitest thumbnail, go on the FILL option the left corner, and add an image from my files. I choose scale to fit and make it the size I want.
4- I open the Trigger option in the upper left area and do the same for the "Normal" state (as a default, Muse puts it on the "Active" one). Now all my states have the same image. I also remove the stroke and fill color behind.
4- I select the default gray bars with arrows within the CONTAINER below and remove them (simply because I intend to change them with my own design and to make sure I don't stumble on them for the forthcoming steps)
5- I select the TARGET area and then go to my FILL option and change the white area to "no color".
6- I then select the CONTAINER area and change the default back color to an image of my choice (a background that I put at 80% transparency).
7- I re-select the TARGET area and drop a Lightbox widget from the Slideshows folder in the Widget library into the selected TARGET area. I resize it to my liking.
8- I go and click on the upper right option button (white arrow under a blue circle) of this new Lightbox to add the images I want.
9- As predicted, the images appear as they should: One big in the center and the proper amount of thumbnails above. When I click on them, they appear sequentially below also as intented.
10- At this point all should be great and working (I think), so I go in the preview section (and also tried via the Preview in Browser (crtl+shift+e)) and what appears, is my page with the actual thumbnail of the cover (again, as it should). BUT here comes the bug::::
Once I click on it, the Lightbox slideshow pops up, and all shows up but the actual center main image (as well as its default black area behind the image), e.g. what should be the bigger version of the 1rst thumbnail from the series above it. I try to click on the other thumbnails above the invisible image and nothing happens. Actually something does happen, because if I decide to click outside of the of the main image area, ONLY then all fades again and my main image pops up ALONE, everything else fades away! So to get out of there, I have to reclick outside but I'm then pushed back to the main original thumbnail gallery....
So it feels like it sorts of become like a 3rd level thing and this is obviously not what is needed...
Any idea what's problematic?!
Much thanks for having taken the time to read my little novel here! ; )
If this is not quite clear still, I could post a video of all of what I'm doing and the resulting problem.

Creating a thumbnail gallery

hey,
i have a folder of photos that i wish to place in a flash
thumbnail gallery. does anyone have suggestions for a method or
have implemented an efficient method that has worked for them?

Nancy,
Thankyou! THe link set up worked great.
I have no idea why my teacher wouldn't recomend this to me. If I knew about being able to do this instead of hot spots I would have the first time.
I tested it out in safari and firefox and everything is ok.
I didn't test it out yet on internet explorer yet because im on a mac.
i did have one problem though. i tested it out in opera, and when you click on the thumbnail, it does go to the image, but doesnt obide by the size.
instead of having it fit the screen like all the other browsers, it previews the picture at the actual pixels filling the entire screen forcing you to scroll to see everything.
is there any way to fix this problem? not many people use this browser so its not too big of a deal. i can't remember exactly but it might have been the hotspot set up where you can set it so the size fits to the browser. can i set this up with the link? and if so how? it seems like it already is working fine for everything else
thanks,
Mike

Movie Clip Thumbnail Gallery

I'm using Flash 8 Professional
Here's the swf:
http://208.131.133.122/flash/
And my fla:
http://208.131.133.122/flash/scene.fla
(8MB sorry!)
Right now, when the mouse is in the same _x position as the
last thumbnail, the thumbnails slide gently to the left to reveal
more thumbnails then slide back to the right when the mouse moves
to the left again.
The problem is that they start sliding to the left whether or
not the mouse is over the thumbnail gallery. If the mouse is at the
bottom of the screen or the top of the screen and in the same _x
position as the last thumbnail, they will begin sliding.
I would like the thumbnails to begin sliding only when the
mouse hovers over the row of thumbnails and not when it is outside
that thumbnail area.
I added some actionscript to stop the movement of the
movieclip when the mouse is above the max or below the min _y
position of the clip; but, it does not work.
I don't really know what I'm doing. Can someone.... anyone...
tell me if this is something that can be done? And if yes, how?
Much thanks in advance.

I see that your first wooden button is a 'scroll down' button
which plays through
the length of the thumbnails. Do you mean you want to
replicate and reverse this on the third wooden button 'scroll up' ?
I'm just guessing here but I'd say you accually have your
thumbnail gallery scrolling down as a motion tween and your scroll
up button just has a 'goto previous frame' type function on it?
If the previous statement is true then I would suggest two
options for you.
1.) You take the scrolling functionality out of a timeline
and do it all with action script. This would be the most effective
way of doing it.
2.) Since you probably don't want to make serious edits to
that .fla. Here's another way. You have a boolean called 'is_rev'
and a function called 'play_backwards'. These are contained within
the same movie clip as your thumbnail gallery.

Your third wooden button has these actions on it.
on(release)
this.is_rev = true;
this.prevFrame(); // This is to start the reverse loop;
Your first wooden button would have this on it.
on(release)
this.is_rev = false;
this.play();
Your second wooden button would have this on it.
on(release)
this.is_rev = false;
The function would be:
function play_backwards()
if(this.is_rev)
this.preFrame();
Now on every single frame of your scrolling gallery you need
to call this.play_backwards();
Please note the way I structured the coding assumes every
object is on the same timeline. If your buttons are in a
different/parent movie clip relative to your gallery movie clip,
your going to need to make sure 'this' is set relative to the two
objects. (i.e. on your button -> this.prevFrame(); would
probably be this.gallery.prevFrame(); )
A quick design note. If your buttons symbolize scrolling not
movement they should be reversed since as the thumbnail gallery is
moving upwards the user is scrolling downwards.

Thumbnail gallery, low res on mobile?

Hello, i have made a gallery in Muse, but when i view it on a mobile the images aren't sharp clear enough..
I have also try the HD setting.. but i still ain't smiling ;-(...
Does the thumbnail gallery showing a low res?
Home

Anyone?? please...or am i the only one, who see/think the resolution is less?

Thumbnail Gallery postition

I'm getting there lol. Got a thumbnail Gallery but the thumbnails are below the main images. Any idea how to level the thumbnails to the top next to the main image please? Also confused as to how Iget the text centered beneath the main image. Link below. Thanks for any help.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm

Perhaps this approach might help: Mouse Over Photo Presentation. Instead of having just two of these lines
<a class="photo" title="Image1"> <img class="mini"
src="URL TO IMAGE ON SERVER" width="100" height=”75"
alt="1" /><img class="big"
src="URL TO IMAGE ON SERVER" width="100" height=”75"
/>
between the <p > and </p > tags you would put three. This method only requires to have one image as the same image is used for both the thumbnail and the large version. Another example of it can be viewed on this test page: Page 5.
OT

Thumbnail gallery of videos

Hello
I want to get first frame from video file without playing it, and convert this frame into image while uploading video file from JSP page.The requirement is to have a thumbnail gallery of videos; the user can select any thumbnail and that video should get played above the gallery on the same page.
Kindly help me in figuring out how to get the first frame of video without playing it? Thanks

For those following along, I found that Adobe Flash CS3's FLV Player component works well, and is FAR less complicated than all the other solutions I found. I'm still working on getting it to behave exactly as intended, but it's definitely the easiest and most successful solution so far.
At this point, I have the embedded clips that display right away (despite not being fully loaded)... so you don't have blank spots, like non-progressive clips would do while they are loading. They also allow you to hit play even while they are still loading. So, all that is very good... The only issue now is the clips download regardless of whether you hit play or not... so all clips on the page will be downloading when you enter the page (causing a possible bottleneck, plus downloading all that data, regardless of whether it's needed or not).

Thumbnail Gallery

Hi everyone, I am trying to set up a thumbnail gallery to open a larger image in a window on the same page when clicked and I was wondering if anyone could help me with a few tips on where to start. I have all my "thumbnails" and "Larger images" all ready to go but I have no idea how to link them.
Many thanks in advance for any help,
Samantha.

Perhaps this approach might help: Mouse Over Photo Presentation. Instead of having just two of these lines
<a class="photo" title="Image1"> <img class="mini"
src="URL TO IMAGE ON SERVER" width="100" height=”75"
alt="1" /><img class="big"
src="URL TO IMAGE ON SERVER" width="100" height=”75"
/>
between the <p > and </p > tags you would put three. This method only requires to have one image as the same image is used for both the thumbnail and the large version. Another example of it can be viewed on this test page: Page 5.
OT

Need help creating a certain Thumbnail Gallery

This is the website that has the gallery that I'm trying to
build:
Howcast.com
I've successfully created the section of the application
which populates the stage with thumbnails from a XML file.
Now, I'd like to spruce it up a bit and create an endless
scrolling capability which loops an array over and over again with
the click of the Previous or Forward button. This action will show
5-7 thumbnails on the stage at any given moment.
How can I code the application to loop through an array of
thumbnails?
How do I create this application to show the motion of
thumbnails scrolling?

You could embed your wmic command in a batch file like so:
@echo off
set LineNo=0
for /F "tokens=1,2" %%a in ('wmic desktopmonitor get screenheight^, screenwidth') do call :Sub %%a %%b
echo Horizontal resolution=%Hor%, vertical resolution=%ver%
goto :eof
:Sub
set /a LineNo=%LineNo% + 1
if %LineNo%==2 set Ver=%1 & set Hor=%2
A faster and more elegant method uses his hybrid script:
@echo off
set Scr="%temp%\TempVBS.vbs"
( echo Set oWMIService = GetObject("winmgmts:\\.\root\CIMV2"^)
echo Set cItems = oWMIService.ExecQuery("Select * From Win32_DesktopMonitor",,48^)
echo For Each oItem In cItems
echo WScript.Echo oItem.ScreenHeight, oItem.ScreenWidth
echo Next) > %Scr%
for /F "tokens=1,2" %%a in ('cscript //nologo %Scr%') do set ver=%%a & set hor=%%b
del %Scr%
echo Screen resolution = %hor% x %ver%

How to do a clean, thumbnail gallery on iweb?

I'm trying to do a nice clean thumbnail photogallery on iweb 08. Something like this....
http://www.airtightinteractive.com/photos/
Tried downloading simpleviewer from this site, but can't seem to load the simplefileexporter. Some "can't find binary file" issue my browsers.
I'm not wed to simpleviewer. I just don't want all that "made by mac" stuff on my gallery, and want to keep it contained on the page without jumping to my .mac gallery. I have my own website url to upload my site to.
Is there anything in iweb, or a simple plugin that would allow me to do that kind of gallery linked above? Something that wouldn't require me opening new windows with no way back, and something that doesn't have all the mac buttons and options on the page?

Have a look here to see if it will help you...
http://roddymckay.com/Satellite/Slideshow.html
This is done with PostCard but its the same procedure.
You might also want to look at JAlbum...
http://jalbum.net/
Their "chameleon" template is very similar and allows you to create a link back to your site. Its freeware and they now offer you free server space too!
You don't have to use "Made on a Mac" (or any other stuff) - just delete it and add your own footer with your copyright information.

Adding spry fade effect to thumbnail gallery??

Hi,
I have a gallery page with a set of thumbnail images each linking to a main image.
I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
...so i'm not sure if i can add the onclick events for the fade which is:
onclick="firstFade.start();"
Any ideas how i can get this to work?
Thanks for any help
B

hi, thanks for the reply.
This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
Here's the html:
<div id="left">
                <img src="images/jpg25.jpg" title="kawasakigreen">
</div>
<div id="right-gallery">
                    <div class="gallery">
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_1.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_2.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_3.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_4.jpg" alt=""/>
</a>
                 </div>
</div>
So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
Thanks
B

Thumbnails gallery

Similar Messages

Maybe you are looking for