Space between thumbnails - Lightbox Widget

Hi
Does anyone know if it's possible to control the space between the thumbnails in Lightbox widget?
It's always with 10 pixels, no matter the size of the thumbnails.
Cheer's
Dandalo Gabrielli

You can control the spacing in the spacings panel. Select any thumbnail and adjust the margin to change the spacing.

Similar Messages

More space between thumbnails

Hello there
I am creating a image gallery with this tutorial
http://www.youtube.com/watch?feature=player_embedded&v=rnZNv2jTC9c&noredirect=1
and I would like to have more space between thumbnails, I guess it is doable but I cant figure it out.
Any ideas??
Thank you

Activate the thumbnail container, this will turn on the spacing panel.

Thinkbox gallery - space between thumbnails

Hi. I am working on a PC on Windows 7 with DW CS4.
I watched a video recently on youTube about how to create a photo gallery in Dreamweaver:
http://www.youtube.com/watch?v=YlB_IZqKg_o
I would like to know how to create more space between the thumbnails. It seems there is only a "space" with the spacebar inbetween. Do I have to use CSS to do this? I am looking to have 5 thumbnails on a row.
I feel like the answer is staring at me in the face, but I have no idea at the moment.
Thank you for any help.

Hi DWILCOX01
I am in the process of working on a test page, but it is not finished. I am just seeing how this thinkbox gallery thing works first.
Thanks for the info, I will look into the margin and padding options.
Thank you again

Lightbox Slideshow adjust spacing between thumbnails

Hi
This is actually a two part question -
1. I want to give a collage look to my slideshow, without any spacing between thumbnails. How can I remove all the space between thumbnails.
2. For all the thumbnails I want -"Fit the frame proportionally" and for all the big lightbox images I want "Fit Content proportionally" so that vertical and horizontal images are not cropped in the Lightbox view. How can I do that for all the images together rather than going one by one.
Thanks in advance.
-MP

Hi MP,
For your 1st request, the Thumbnails (containers that hold the thumb images) cannot be resized individually and maintain same dimensions for all the thumbnails. For this reason, even though you can remove all spacing between Thumbnails by selecting the Thumbnail Container and specifying H and V Gutter in the Spacing Panel to 0 -- if your slideshow images are of mismatched dimensions and proportions and you have Fit Content Proportionally selected as the Fitting option, then there will be an inevitable space around the thumb images either vertically or horizontally. You can work around that by using the Fill Frame Proportionally option.
For your 2nd request. you can choose the appropriate option in the Flyout menu for "New Hero" and "New Thumbnail" options BEFORE adding the new images to the slideshow. The selection you make here will be applicable for images that you add after setting this option. So the appropriate workflow would be to setup your slideshow the way you want, then choose the appropriate option for New Hero and New Thumbnail and then add all your images to the slideshow.
If you want fine grained control over thumbnail and images, you may look at Composition Widgets which allow you to manually place and size all content individually and still allow you to use the composition as a slideshow upon publishing.
Thanks,
Vikas

Problem with Alt Text output from thumbnail image of Lightbox widget

I’m having a problem with the Lightbox widget not producing alternative text based on the image properties. I’ve set ALT text for the image properties on both the larger Ligtbox image as well as the thumbnail. But the HTML output from Muse does not include the ALT text on the thumbnail version of the image. Here’s an example:
    <div class="popup_anchor">
       <div class="Thumb popup_element clearfix" id="u4409">
        <a class="anchor_item grpelem" id="untitled"></a>
        <div class="grpelem" id="u4433">
         <img id="u4433_img" src="/images/n0060292x292.jpg" alt="" width="292" height="292" />
This may be a problem that came in a previous release of Muse. I have a few older examples where ALT text is produced, but it’s no longer updated if I update the Image Properties.

I'm seeing the same problem. Looks like a bug to me. Any ideas as to how we can get this on Adobe's bug fix list?

How to add space between two tabs in accodion widget?

Hi! I am using the accordion widgets and trying to add space between each of the tabs, would someone help me on this. Thanks

Directly editing the output of Muse is virtually always a bad idea. At a minimum it will create a very cumbersome workflow since Muse will overwrite your changes every time you re-export (export, upload, publish, preview).
It depends on exactly what visual effect you want to achieve, but you probably just need to select the accordion widget and use the Spacing panel to adjust the vertical gutter value.

Menu widget (horizontal) space between buttons

How do I get spaces between navigation buttons on the horizontal menu widget?
In the basic Katie video, she does this as a "pre-set". Then in the advanced video it shows up in the images with no discussion. Thanks for helping.

Hello,
You can either choose to use manual menus for this and place the menu as per your requirement, or you can use the "uniform spacing" option in the item size section of menu options for some spacing between the menu items.
Cheers
Parikshit

Thumbnails in Lightbox widget

It would be great if the thumbnail bounding box size in the lightbox widget could conform to direction of the image being placed in it. It would really open the door to creative design possibilities when arranging the thumbnails, especially if you use Free Form Thumbnails. Even better if there was an option to scale the images based on either the short or long edge.
Currently because all of the bounding boxes are conformed to a landscape format, when you try to create a thumbnail grid based on orientation, the portrait images overlap the landscape and other portrait images, so when you roll over the images, they cross over to the next one midway and in some cases totally overlap the center image in groups of three.

If you double click on the photo thumbnail, then right click (contextual menu) and choose "fitting" then choose "fit content proportionally". This will then scale proportionally when resizing photo thumbnails and keep everything spaced to the "placeholder mask", NOT the image itself. Not bad, at least you can have a complete visual of the actual image via thumbnail as opposed to the 4x3 thumbnail the default creates.
I am still trying to figure out how to get this to apply to all of the thumbs.
Also the lightbox where it shows the larger picture sometimes does not update, you have to choose each photo
and do the same double click, right click, choose fit proportionally.
I hope this is fixed soon.
Best,
KStC

Help with adjusting spacing between thumbnails and image in slideshow

How can I adjust the spacing on the slideshow page?
Customer wants more space between the thumbnails at the top and the image(s). Can I move the image & navigation tool or adjust the image size relative to the thumbnails and navigation tool at the bottom?
Although I'm familiar with html source code and working on simple stuff at that level, I have yet to locate it in iWeb and make any adjustments.
If anyone has step-wise instructions, I'd appreciate it. Thanks much.

Although I'm familiar with html source code and working on simple stuff at that level, I have yet to locate it in iWeb and make any adjustments.
iweb photos page's elements: header controls, detail view and footer controls are generated by ajax widgets, so there is nothing to in page source for you to find.
If anyone has step-wise instructions, I'd appreciate it. Thanks much.
that would be the instruction on how ajax widgets build photos page... there is none.
you can send feedback to apple and ask for details on iweb widgets and tools to build widgets.
that said, it can be done... check out with safari: http://temp.cyclosaurus.com/DetailView_Rearranged/Photos.html
code is linked to my example, i don't do tutorial.

CS5.5 lightbox widget won't work

Hi, I am currently designing my portfolio page, and I decided to insert the lightbox widget into it to save time; however, it is causing me a lot of problems. I have tried both dragging the widget directly into dreamweaver and downloading it manually; although, no matter what I do, both the thumbnail images, enlarged images, and all the .gif's do not show up.
I realized that this would usually happen due to incorrect file directory, so I double checked those paths. It turns out that the paths are all correct. I tried redownloading it various times, but nothing changed.
Is this a typical problem with CS5.5?? It is so frustrating!

I can't speak to the Lightbox Widget itself because I've never tried it. But you can successfully add jQuery plug-ins into any site regardless of which version of DW you use.
Download Fancybox or similar Lightbox plug-in script.
For details, see Primer For Using jQuery Plug-ins.
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O.

How to add a video to a lightbox widget

Hello!
How do you put a video in the muse lightbox widget?

You can drop a video player widget right into the target area of the composition. Or better yet, you can use a dedicated video gallery if you're looking to use lightbox displays for video thumbnails. Something like these:
YouTube Gallery:
http://widgets-musethemes.businesscatalyst.com/tb023.html
Vimeo Gallery:
Adobe Muse Vimeo Video Gallery Widget | MuseThemes.com
Hope that helps!

Dreamweaver Lightbox Widget

Lightbox gallery works in browser, but not online. Images are displayed, but javascript is not working. Any suggestions for troubleshooting? http://www.vanessa-lynn.com/paintings.html

Copy & paste this code into a new, blank document. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fancybox2 Demo</title>

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

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>

<link href="threeColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<a href="index.html" title="home" id="Insert_logo">
<img src="images/logo-small.jpg" alt="" name="Insert_logo" width="90" height="39" style="background: #8090AB; display:block;" />
</a>

</div>
<div class="content">
<h2>paintings</h2>
<ul id="gallery">
<li> <a class="fancybox" rel="group" href="images/untitled-1.jpg" title="untitled">
<img src="images/thumbnail-1.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-2.jpg" title="untitled">
<img src="images/thumbnail-2.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-3.jpg" title="">
<img src="images/thumbnail-3.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-4.jpg" title="">
<img src="images/thumbnail-4.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-10.jpg" title="">
<img src="images/thumbnail-10.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-11.jpg" title="">
<img src="images/thumbnail-11.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-12.jpg" title="">
<img src="images/thumbnail-12.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-13.jpg" title="">
<img src="images/thumbnail-13.jpg" width="200" height="129" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-14.jpg" title="">
<img src="images/thumbnail-14.jpg" width="200" height="131" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-15.jpg" title="">
<img src="images/thumbnail-15.jpg" width="200" height="130" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-16.jpg" title="">
<img src="images/thumbnail-16.jpg" width="200" height="132" alt="" />
</a> </li>
<li> <a class="fancybox" rel="group" href="images/untitled-17.jpg" title="">
<img src="images/thumbnail-17.jpg" width="200" height="132" alt="" />
</a> </li>

</ul>

</div>

</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            helpers : {
                    title : {
                        type : 'inside'
                    buttons    : {}
</script>
</body>
</html>
Fancybox is much better than the lightbox widget.
Nancy O.

Neither the menu or lightbox widgets are working correctly

My website is at http://www.goodwinsanimations.com/2
I'm using the menu widget and lightbox widget in my website and neither are working correctly:
The menus work but the dropdown feature does not work when I test it in either Mozilla Firefox or Google Chrome. This is not vital in my case but I would like to have it working
The lightbox part of the lightbox widget does not display at all but the thumbnails and text items are there but inactive
How do I solve this? It looks bad without the latter in particular. I've tested the lightbox I used on multiple pages. I don't want to re-insert it as I've already added the captions and images.
Thanks

And I forgot to add for sure the laptop is authorized --- I couble checked.
thnx

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

Muse lightbox widget

I want to use the lightbox widget with an initial picture and then I want to have other pictures that are stacked and triggered to display when the mouse hovers over the thumbnail trigger. When the mouse is not over one of the triggers i want the initial picture to display.
Additionally, can you have a flyout menu as part of the trigger that will serve as links to other pages. Lastly, I have been able to resize the target that hols the puctures, but the black frame that surrounds it will not resize. I want the taget to be 800 x 250 with the outer border slightly larger in order to give the appearance of a frame.
Joe Parker

Please try to pin them and then verify if still it shows the same behavior.
Thanks,
Sanjit

Space between thumbnails - Lightbox Widget

Similar Messages

Maybe you are looking for