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.

Similar Messages

How can I use the tooltip widget on individual images in my thumbnail gallery?

Hey guys
I've got a client that is insisting on not having the caption text visible on each picture unless you could click or hover over a little information button. But I can't get the tooltip widget inside an individual image's lightbox (hope this makes sense). I have very little coding knowledge and was hoping someone would have the answer to this?

Does no one have an answer to this Was hoping that someone could save me on this dilemma.
A side question, has anybody used a different gallery with muse before?

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

Automatic image compression for photo gallery web apps?

Is it possible to scale and compress images to a maximum size when uploading to a web app? This is for a photo gallery that allows public submissions, and we are anticipating that we will get lots of photos that are very large. This is a task that would be best handled by a server-side image processing lib, but is there another way since we don't have that on BC?
Thanks!

I understand that you are probably concerned with data storage limits when asking this question. But, you can create thumbnails when displaying images within the photo gallery. This will allow a very large image to display very quickly within the gallery.

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

Thumbnail Gallery, remove spacing and rollover color

Hello,
I am creating a gallery and would like there to be no space at all between thumbnails (see Photoshop image attached), I cannot seem to get rid of the space, is this possible in Muse?
Is there a way to make the thumbnail highlight with the yellow color at 75% opacity when I rollover? I tried playing around with the rollover states in the fill, but could not get this working either.
Also, this is just a wishlist item, but I wish I could create a gallery using the the fast lightbox method bundled with Muse, however have the flexibility to define my own thumbnails, say by going into the fill and defining a different image for the thumbnails, I could see this opening up more interesting possibilities. Just a thought.
Any help is appreciated, thanks!

The slideshow widget doesn't give you the option to close the gap inbetween thumbnails.
You could use the "Blank Composition" widget in the "Compositions" widget library.
It allows you to modify the thumbnails, and also allows you to have a different image than the hero image.
There are limitiations, it is more time consuming to assemble, since you have to import each image in separately. there also is no counter and no ability to edit together.

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!

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

Pre-loading external images for XML-based gallery

I'm working-on an XML-based photo gallery here:
http://www.unionandparkwood.com/demo/flash_gallery/
It works how I want it, except that the first time a
thumbnail is clicked for an image, it pauses long enough to skip
the fade. If you click-through the images a second time, you'll see
that it works smoothly. My guess is that the first time the
thumbnail is clicked, the image isn't cached, yet.
I tried to fix this by creating a JavaScript file for the
page to pre-load each image and thumbnail:
0003a = new Image;
0003a.src = "images/Down-Range.jpg";
0003b = new Image;
0003b.src = "thumbnails/Down-Range.jpg";
But that didn't work. What would be the best way to do this?
I included a link to "Download ZIP" of the FLA project on
this page, too, because it wouldn't be easy for me to describe
what's happening. In a nutshell, a thumbnail click launches a
function that loads the appropriate image into the main image
holder. What seems to be happening the first time is the image
isn't loaded before the fade is finished, so the image just appears
after a short pause the first time.

>>What seems to be happening the first time is the
image isn't loaded before
>>the fade is finished, so the image just appears after
a short pause the
>>first time.
As has been said many times in thos forum - use the
MovieClipLoader class to
load images, and then use that class' onLoadInit method to do
things with
the loaded image. Loading is asynchronous - you _have_ to
wait until the
image is done loading before doing a fade.
Dave -
www.offroadfire.com
Head Developer
http://www.blurredistinction.com
Adobe Community Expert
http://www.adobe.com/communities/experts/

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?

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

Special Thumbnail Gallery

I was looking around and maybe not searching on the correct
terms,
but i have a client that is looking for a gallery setup for
her studio...
the thumbnails she wants is to be part of the image, not just
a smaller
image of the entire thing..
So basically a sneak peek of the image, when you click on it
then you see
the entire image...
Does that make sense?
The issue is that currently to do that, requires her or
myself to crop the
image so we have the part she wants to show as a thumbnail,
which takes
time.. is there something available in form of an extension..
that will
display different parts of an image as a thumbnail?
ASP, SQL2005, DW8 VBScript

.oO(Daniel)
>I was looking around and maybe not searching on the
correct terms,
>
>but i have a client that is looking for a gallery setup
for her studio...
>the thumbnails she wants is to be part of the image, not
just a smaller
>image of the entire thing..
>
>So basically a sneak peek of the image, when you click on
it then you see
>the entire image...
>
>Does that make sense?
Yes and no.
The entire purpose of thumbnails is to give the visitors a
quick
overview of the gallery, hence they should download and
appear as fast
as possible. It doesn't make any sense to use the fullsize
image and let
HTML scale it down or only show a part of it. The result will
look
terrible and it will waste a lot of bandwidth on the server
and the
client. You definitely need two sets of images - fullsize and
thumbs.
The only question is how to create the thumbs.
>The issue is that currently to do that, requires her or
myself to crop the
>image so we have the part she wants to show as a
thumbnail, which takes
>time.
If you just want to create smaller versions of all the
images, then this
can be automated in many image editors with some batch
processing mode.
But if you want the best quality, then you should pick a
smaller part of
each image by hand to create the thumbs.
With some post-processing it's also possible to automate this
a bit. You
could just cut out the parts for the thumbs and then run a
script, which
makes them all the same size. Paint Shop Pro for example has
a very nice
built-in scripting feature, based on the Python language.
>is there something available in form of an extension..
that will
>display different parts of an image as a thumbnail?
Even if there would be something like that - in the time it
takes to
configure that extension to show the part of the image you
want, you
could as well fire up your image editor, cut that part out of
the full
image and store it.
Micha

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

Cycle images in a thumbnail gallery

Similar Messages

Maybe you are looking for