Image overlay (greybox,lightbox,thickbox etc.)
Hello!
Has anyone figured out how to overlay images in a
Lightbox/Thickbox/Greybox style? Using those scripts somehow break
my Spry-Pages or are not working properly. Would be nice to have a
spry effect to do this.
Thanks in advance!
s e v
HI,
I have very little coding experience and have been struggling to implement Greybox on a site. I’ve got it working in IE but in FF and Safari it loads the greyed-out screen and icons, but the image is blank. However, if you hit the back arrow or reload and link to the gallery again, the images will appear, sometimes smoothly, other times flickering first.
I am using Dreamweaver CS3. I’ve check for the MM_image preloader as the Greybox FAQ suggests but doesn’t seem to be there (unless I am not looking in the right spot). None of my images have spaces in the file names, so this too cannot be the issue.
you can view the page in question here: http://www.harbourdeep.com/gallery_zTest3.html
Any suggestions would be greatly appreciated. Please be as descriptive as possible, as I said, I am a noobie.
Thanks!!
Similar Messages
-
Image Gallery or Lightbox that works for DW CS6?
Help! I need an image gallery or lightbox that works! I tried the Lightbox Gallery in Widgets and while it works for the most part, the nav buttons don't show up and I've put the files in every directory (path) possible. Does anyone have a fix for this - I've perused forums for hours about this. OR is there something else that's easy and fast and that works? And hopefully free?
Thank you so much!The page is not live, so here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title>
HLG - Flagstone Driveways Walkways Paths
</title>
<style type="text/css">
/*<![CDATA[*/
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
body {
background-image: url(images/background2.gif);
/*]]>*/
</style>
<link href="!-css-style.css" rel="stylesheet" type=
"text/css" />
<style type="text/css">
/*<![CDATA[*/
a:link {
color: #FFF;
/*]]>*/
</style>
<link href="css/lightbox.css" rel="stylesheet" type=
"text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet"
type="text/css" />
<script src="scripts/jquery.js" type="text/javascript">
</script>
<script src="scripts/lightbox.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #910000;
padding-left: 2px;
padding-top: 4px;
padding-right: 2px;
padding-bottom: 4px;
width: 550px;
height: auto;
text-align:center;
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #ffffff;
border-left-width: 4px;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 20px;
margin-left:10px;
margin-right:10px;
margin-top:5px;
margin-bottom:5px:
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffcc66;
border-left-width: 4px;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 20px;
#lightbox-container-image-box {
border-top: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
/* EndOAWidget_Instance_2127022 */
/*]]>*/
</style>
<script type="text/xml">
<![CDATA[
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
]]>
</script>
</head>
<body onload=
"MM_preloadImages('buttons/directionsover.png','buttons/contactover.png','buttons/gallery over.png','buttons/homeover.png')">
<table width="980" border="1" bordercolor="#000000" align=
"center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="40" align="center" bgcolor="#910000"
class="MaroonBanner">
<p>
Heartland Landscape Group, Inc.| Osage Beach,
Missouri | (573) 302-8855 | <a href=
"mailto:[email protected]" class=
"MaroonBannerEmail">[email protected]</a>
</p>
</td>
</tr>
<tr>
<td width="980" height="182" align="center" bgcolor=
"#000000">
<img src="images/plant1smlogo.jpg" width="980"
height="180" alt="Heartland Landscape Group" />
</td>
</tr>
<tr>
<td height="40" align="center" bgcolor="#910000">
<img src="images/escape_bnnr.png" alt=
"Escape the ordinary with greener landscape solutions"
width="980" height="40" />
</td>
</tr>
<tr>
<td valign="top">
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="213" valign="top">
<table width="200" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="46" colspan="2" valign=
"middle">
<a href="index.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Homepage','','buttons/homeover.png',1)">
<img src="buttons/home.png" alt=
"Homepage" width="210" height="45" id=
"Homepage" border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="services.html"><img src=
"buttons/servicesover.png" alt=
"Services" width="210" height="45"
border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="beforeafter.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Before & After Gallery','','buttons/galleryover.png',1)">
<img src="buttons/gallery.png" alt=
"Before and After Gallery" width=
"210" height="45" id=
"Before_and_After_Gallery" border=
"0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="directions.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Directions','','buttons/directionsover.png',1)">
<img src="buttons/directions.png" alt=
"Directions" width="210" height="45"
id="Directions" border="0" /></a>
</td>
</tr>
<tr>
<td height="43" colspan="2" valign="top">
<a href="contact.html" onmouseout=
"MM_swapImgRestore()" onmouseover=
"MM_swapImage('Contact Us','','buttons/contactover.png',1)">
<img src="buttons/contact.png" alt=
"Contact Us" width="210" height="45"
id="Contact_Us" border="0" /></a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr>
<td width="53">
<a href=
"https://www.facebook.com/pages/Heartland-Landscape-Group-Inc/230076883731915"
target="_blank"><img src=
"images/fb_logo.png" alt=
"Follow Us on Facebook" width="50"
height="50" border="0" /></a>
</td>
<td width="147" valign="top" class=
"BodyTextsm">
Follow us on Facebook for project
ideas, tips and landscaping news!
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" class="Textmed">
This Web site is best viewed with
Mozilla Firefox or Google Chrome.
</td>
</tr>
</table>
</td>
<td valign="top" class="Heading">
<table width="765" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td valign="top" class="Heading">
<p>
Our Services - Flagstone Driveways,
Walkways & Paths<br />
<img src="images/line.png" width=
"757" height="3" alt=
"Horizontal Line" />
</p>
<p class="BodyText">
Whether replacing or building a new
driveway, walkway or path, naturally
beautiful flagstone is the perfect
alternative to concrete or brick
pavers. Depending on the individual
taste of the homeowner, there are
many sizes, colors, shapes, and
styles of natural stone to select
from, and lend themselves to the more
"natural" landscapes.<br />
</p>
<table width="550" border="0" align=
"center" cellpadding="0" cellspacing=
"0">
<tr>
<td align="center">
<div id="gallery" class=
"lbGallery">
<ul>
<li>
<a href=
"images/flagstone/images/garden_pathways.jpg"
title=
"Garden Pathway"><img src=
"images/flagstone/thumbnails/garden_pathways.jpg"
width="72" height="72" alt=
"Flagstone Entrance Patio" /></a>
</li>
<li>
<a href=
"images/flagstone/images/pa_stepper_path.jpg"
title=
"Pennsylvania Stepper Path">
<img src=
"images/flagstone/thumbnails/pa_stepper_path.jpg"
width="72" height="72" alt=
"Pennsylvania Stepper Path" /></a>
</li>
<li>
<a href=
"images/flagstone/images/black_hills_rustic_path.jpg"
title=
"Black Hills Rustic Path"><img src="images/flagstone/thumbnails/black_hills_rustic_path.jpg"
width="72" height="72" alt=
"Black Hills Rustic Path" /></a>
</li>
<li>
<a href=
"images/flagstone/images/flagstone_path_with_firepit.jpg"
title=
"Flagstone Path With Firepit">
<img src=
"images/flagstone/thumbnails/flagstone_path_with_firepit.jpg"
width="72" height="72" alt=
"Flagstone Path With Firepit" /></a>
</li>
<li>
<a href=
"images/flagstone/images/flagstone_with_gravel.jpg"
title=
"Flagstone With Crushed Creek Gravel">
<img src=
"images/flagstone/thumbnails/flagstone_with_gravel.jpg"
width="72" height="72" alt=
"Flagstone With Gravel" /></a>
</li>
</ul>
</div><script type=
"text/javascript">
//<![CDATA[
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: '/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#000000", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: 0.75, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Flagstone Patios', //Default text of image
txtOf: 'of'
// EndOAWidget_Instance_2127022
//]]>
</script>
</td>
</tr>
</table><br />
<table width="485" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" valign="top" class=
"BodyText">
<p>
- <a href="design.html" target=
"_self" class=
"Emailblack"><span class=
"Email">Landscape Design
Services</span></a>
</p>
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<span class="BodyText">-
Landscape Services:</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Ornamental Gravel &
Mulches</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Retaining Walls:</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td width="391">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Block</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Natural
Stone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Patios</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Brick</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Flagstone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">-
Driveways, Walkways &
Paths</span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Brick</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td width="45" valign="top">
</td>
<td>
<span class="BodyText">- <a href=
"flagstonewalks.html" target=
"_self" class=
"Emailblack"><span class=
"Email">Flagstone</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Landscape
Steps</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Plantings &
Sod</span></a></span>
</td>
</tr>
<tr>
<td width="45" valign="top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Water
Features</span></a></span>
</td>
</tr>
<tr>
<td width="45" height="32" valign=
"top">
</td>
<td colspan="2" valign="top">
<span class="BodyText">- <a href=
"index.html" target="_self"
class="Emailblack"><span class=
"Email">Outdoor Living
Fun</span></a></span>
</td>
</tr>
<tr>
<td height="30" colspan="3" valign=
"top">
<span class="BodyText">- <a href=
"irrigation.html" target="_self"
class="Emailblack"><span class=
"Email">Irrigation</span></a></span>
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<span class="BodyText">- <a href=
"lighting.html" target="_self"
class="Emailblack"><span class=
"Email">Lighting</span></a></span>
</td>
</tr>
</table><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="980" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="211">
</td>
<td width="486" align="center">
<span class="Copyright">Copyright © 2013 Heartland
Landscape Group, Inc.</span>
</td>
<td width="283">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> -
Batch processing with an image overlay
Is it possible to do batch processing with an image overlay in FW CS4?
I'm trying to resize several hundred images and place rounded corners on them.
If this cannot be done in FW, does anyone know of another program that could accomplish this?Hi Marje,
It's possible to include both resizing and image overlay in a custom Fireworks command that can be used in batch processing. To get started, you could check out this tutorial that deals with the first step.
That article describes how to perform image resize and overlay (in that case, a watermark), and then how to record the steps and turn them into a custom command that can be later used in batch processing.
Once you saved the custom command, click File >> Batch Process, and follow the steps below:
In the first window, select the images you want to process.
On the next screen, open the Commands dropdown menu and select the custom command you created (it'll probably be on the bottom of the list), and click the Add button to include it in the batch process list.
Finally, on the next screen select the location of the processed files, and optionally save the batch script for later use.
Good luck! -
Image overlay problem ,want to fix it
<?php get_header(); ?>
<div onclick="myFunction()" id = "xx1" style="position: absolute; width: 209px; height: 607px; z-index:400" >
<img src = "http://i.imgur.com/YqqQj2x.png"></img></div>
<script>
function myFunction()
element = document.getElementById("xx1");
img = element.firstChild;
element.removeChild(img);
</script>
I used above code to get image overlay feature over my blog post and on clicking the overlay image it must be removed.
my webpage : http://netstrikers.comeze.com/?p=69
I have a problem that the overlay image is not in position , it has some problem in alignment ,(During zoom out the web page , overlay image changes its position)
I want the overlay image exactly within the blog post container. can anyone help me to modify the code.
my single.php file : http://pastebin.com/raw.php?i=8ReWyLxu
code edited : cracker007To maintain position with respect to the rest of the page elements, the nearest ancestor container of any absolutely positioned element must be positioned relatively, for example -
<div id="ancestor" style="position:relative;">
<div id="xx1" style="position:absolute;">
With this code arrangement, as div#ancestor shifts in the normal flow of the code rendering, the div#xx1 will shift by a corresponding amount.
Does that help? -
When i save any image from any website then there is no option showing in the save as box like saves as .jpg etc. In this case I manually add the extension of image for example .jpg .gif etc. Please solve my problem :(
I'm guessing your problem is caused by code validation errors: orphaned division tags for example, or mismatched code and document type (i.e. XHTML /> mixed with HTML > style closures).
Start by using the code validation tools below and fix any reported. You'll need an Internet connection for this:
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
If this doesn't solve the problem, you will need to post a URL to your live page so we can see your code and images working together. Or at the very least copy and paste your HTML and CSS code into a reply using double arrows >> Syntax Highlighting > Plain.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
I am trying to print a document through Firefox. We have a Form view / marking tool to make these image overlays to make highlighted boxes on the document.
It prints the yellow 'highlight overlays' fine in all other browsers and in OSX using firefox, but the highlighted boxes won't print in Firefox using Windows 7.
I have the 'Print backgrounds' option checked in Firefox settings.
Please advise.I am trying to print a document through Firefox. We have a Form view / marking tool to make these image overlays to make highlighted boxes on the document.
It prints the yellow 'highlight overlays' fine in all other browsers and in OSX using firefox, but the highlighted boxes won't print in Firefox using Windows 7.
I have the 'Print backgrounds' option checked in Firefox settings.
Please advise. -
I'm using the "image overlay with link" script (downloaded from apple) - I'm able to get as far as entering the target URL, then I get a message saying "The front movie has no file". I've saved the QT movie as source, and the image file is a JPEG, smaller than than the QT movie - the files are both in the same folder. What am I missing?
ThanksMany of these AppleScripts do not work with Tiger or QuickTime 7.
Until someone (smarter than me) fixes them the only way to make them work is to use them on an older OS and older QT Pro version.
They do work (the resulting file works properly on Tiger and Windows) but results are a bit "flakey".
I would avoid SMIL until Apple embraces the newest version of it.
http://www.w3.org/AudioVideo/
Uses version 2.1 and I think (please don't quote me) Apple's QuickTime app only uses version 1.
This entire thread is important to QT content developers.
We don't need "broken" AppleScript support or third party tools to continue our Web based files.
Or, do we? -
Help! Image Overlay problems in FCP
I am working on a web video project in FCP 7.0.2 that is working with both video and images. I need a watermark overlay in the bottom right corner for the duration as well as various image overlays and I use moving images as transition between scenes. Whenever I lay an image on top of video, the video speeds up. Audio stays in real time but the video gets really fast. Whenever I try to use an image as a transition, during the transition and soon after it's completion, the screens flashes black.
I recently completed a project that is the exact same as this one in regards to settings and images and had none of these problems. Any idea what the issue is?Sorry for being vague. I think I solved it. I used Amerisoft Video Converter to convert 1280 x 720 MTS files. With the original project, I made mp4's with the convertor. With the newer project, they are all .MOV's and they aren't getting along with my previous sequence settings. I am re-exporting them.
The transition isn't a pre-programed transition. I take a .PNG and set a motion tween in the motion tab and have it slide across as a transition from one scene to another. It's just a moving image file. I also have a logo overlayed on the bottom right corner. Knowing all of that, can you think of why the image files weren't getting along with the .MOV's and the sequence? -
Hello:
Does anyone have experience using lightbox for overlaying
images on web page? I'm using DW 8 and cannot figure out the
following:
I've got all my images in the right image folder, I've put
the light box.css and the 3 js files in my site...If you click on
the 3 products near the bottom of the page below, you'll get a new
window for each product instead of the way lightbox is supposed to
work...
http://www.enhancedwireless.net/Technology/PARROT_Units.shtml
The way it should work:
http://www.huddletogether.com/projects/lightbox2/#download
Have a look at my code on the above page, if you'd be so
kind, and let me know how I may fix this...I appreciate it greatly.
I've emailed the author of this lightbox a few days ago, no
answer yet, so am trying this forum.
Thanks KBThanks for the reply - I've done the following:
<!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>
<title>PARROT</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<link href="../Style.css" rel="stylesheet" type="text/css"
/>
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
<script type="text/javascript"
src="../prototype.js"></script>
<script type="text/javascript"
src="../scriptaculous.js?load=effects"></script>
<script type="text/javascript"
src="../lightbox.js"></script>
<script language="JavaScript" src="../mm_menu.js"
type="text/javascript"></script>
<script language="JavaScript" src="../iwics_menu.js"
type="text/javascript"></script>
I stripped out the js folder name and replaced it with
correct path like the other js files on my page; at first, I
removed the "?" from the end of scriptaculous.js (didn't know why
that is in the code right before "load=effect") but then the image
appears miles down on the same page with the "close" and "title"
words positioned either on top of the image or on bottom. Then I
put the "?" back in and I still get a new window.
Would love for this to work. It is a nice effect. How to fix?
http://www.enhancedwireless.net/Technology/PARROT_Units.shtml
Thanks for your time.
Kent -
How do I ad pop up text to an image in the lightbox widget after it has been selected?
Hi there,
My client, a photographer, wants to ad text to some of the images in his gallery on the website I have built him in Adobe Muse, but he wants people to click/hover over an "info button" before they get to see the text as he likes the idea of user interaction. Think is I can't seem to place the tool tip widget inside the lightbox of my image. Do any of you have a way of doing this? My knowledge of coding is very limited and I've tried researching other ideas but have come out dry.
I posted this question a while back but didn't get any responses, and I am getting quite frustrated with this as it is the only thing keeping me from completing a job, as my client insists on having this functionality!
Please HelpTry to use "Lightbox Display" in "Widget Library->Compositions". "Widget Library->Slideshows" can only contain images.
- Abhishek Maurya -
How to hide image displays for lightbox
Using DW, I have a lightbox display. Here is the page:
Example page
As you'll see, if you click on the photo, it opens up into a lightbox. My colleague wants to have 10 photos open up in the lightbox but they do not want all of those photos to have thumbnails on the page. In other words, they want one single photo, you click on it, and then see all 10 photos in the lightbox.
If I put all of the img code for all 10 images on the page then all 10 images will also show up on the page. So I have to somehow "hide" the images so that the small version of the photos do not show up on the page but will show up in the lightbox.
Sorry if this sounds confusing and hope someone can help. Thanks.Deaf Mike wrote:
I've never seen it either as it already existed on the site and I actually just discovered it.
Here's another example
When you arrive at the above, click on the turtle and you'll see how several photos are in the lightbox. Then close the light box and scroll down and click on those + symbols. See those other images in the other sections? Somehow the code is pulling those photos into the lightbox too.
I want to do the same thing but the key is there will be no + symbols on the page - just one turtle photo and when you click on the turtle, all of the other photos appear in the light box. Another thing I'm thinking about doing is having one turtle photo and then 10 1 pixel by 1 pixel invisible image down at the bottom of the page then have 10 of them and then the h ref for each are the larger photos - that way when you click on the turtle, the code will pull in the 1X1's large photos into the light box.
Well that would be pretty easy just do as 'Per' suggested in the previous post and hide the 'thumbnails' you don't want on the page:
Create a rule in your css - something like:
.hide_thumbs {display:none;}
So typically a set of light box images might look like the code below. (when clicked they open in a lightbox and that lightbox usually has an option to display the other images in that particular gallery by clicking through them, rather than clicking on them individually).
<a href="turtle.jpg"><img src="turtleThumb.jpg" alt="turtle"></a>
<a href="whale.jpg"><img src="whaleThumb.jpg" alt="whale"></a>
<a href="dolphin.jpg"><img src="dolphinThumb.jpg" alt="Dolphin"></a>
<a href="tuna.jpg"><img src="tunnaThumb.jpg" alt="Tunna"></a>
If you add a class="hide_thumbs" the ones you don't want to show get the display: none; property BUT they should still be available in the lightbox to click through.
<a href="turtle.jpg"><img src="turtleThumb.jpg" alt="turtle"></a>
<a href="whale.jpg" class="hide_thumbs"><img src="whaleThumb.jpg" alt="Whale"></a>
<a href="dolphin.jpg" class="hide_thumbs"><img src="dolphinThumb.jpg" alt="Dolphin"></a>
<a href="tuna.jpg" class="hide_thumbs"><img src="tunnaThumb.jpg" alt="Tuna"></a> -
Determining best image overlay size to use
Hi folks
So I'm working with Premiere Pro CS6 doing some video editing for a minister friend of mine. During bits of the video, I've been overlaying quotes and whatnot. I'd like to achieve some consistency by always ensuring these appear in the same screen location. So I thought one easy way to accomplish it would be to determine the pixel size of the sequence. And the properties report back that my sequence is 1440 x 1080. I figured I could just create and manipulate images of that exact size and drop them in for exact placement.
The problem is that when I create an image of that size and drop it into PP, the right monitor shows the image with pillarboxed areas of the video on either side of it. The image certainly appears to be spot on with height, but the width is off and I'm not sure why?
So what's the explanation here? It would certainly seem the sequence properties are in conflict with what the right monitor area in PP is presenting.
Thanks... RickYou can specify the PAR of titles as you create them:
Basically, anamorphic HD uses rectangular pixels
in order to squish the 16x9 image into a 4x3 frame.
Premiere 'un-squishes' the pixels back to 16x9.
If your source footage is 1440x1080 (1.333),
you are correct working in a 1440x1080 (1.333) Sequence...
you just need to create matching aspect / par titles.
If you are using another application to create your .png images,
I would be inclined to make them 1920x1080 (1.0).
This will fit your anamorphic Sequence without worrying about PAR. -
Hy,
i have a thump pic in my content and on click i want to open it in a lightbox.
I think this must be a easy way, but i cant find anything.
PLEASE Help.
Thank you - AndreasHi Andreas
You can use lightbox composition, where the trigger can be used for small image and target would be the larger version of the image.
http://muse.adobe.com/widgets-by-category-lightbox-display
http://tv.adobe.com/watch/muse-feature-tour/muse-create-a-lightbox/
Thanks,
Sanjit -
How to remove image overlay when emailing a photo?
When I try and email a photo directly from aperture, the selected photo has another photo embedded in it. The same photos is alway overlayed in the lower right hand corner. It seems like some setting got activated but I can't figure out how to remove it. Any help would be appreciated.
Thank youIt sounds as though you have a watermark assigned to the Export Preset you have in turn assigned to be used when you email an Image.
The Export Preset is selected at "Aperture➞Preferences➞Export". Export Presets can be customized via "Aperture➞Presets➞Export". Either select a Preset that does not have a watermark, or remove the watermark from the selected Preset. -
To start, I will tell you what I am trying to do. For a Children's Christmas skit that is going on at my church, the setting of the skit is supposed to take place in an attic. What I have done is taken a picture in my own attic, looking out the window. Using Pixelmator, I made the panes of glass transparent and exported the image with the hopes of overlaying it on a video loop of snow that I have (that way it will be snowing outside the attic, more or less).
It seems however that FCE is not being cooperative on the video side of this, however, since all I get is white where the transparency is supposed to be. Does FCE support transparent layers in images?You would be wrong on both accounts. Pro Presenter 4 and Pixelmator are Mac only (actually, I think PP4 released a PC version a month or two ago but I am not sure).
But, if you want to look at the image, you can access my iDisk public folder (username: missileboat). I have created a folder called 'Apple Discussion Forum.' In it, I put the original image, the PNG I exported and also the PXM project file (the format Pixelmator saves its project files in) and, just for good measure, I included a copy of Pixelmator as well (it has a 30-day trial if you want to play with it).
Maybe you are looking for
-
References from nested clusters
Hi, Currently our station can test only one product at the time, but we modified the wiring so now we can attach 2 units to the same station. A new application must be written to handle the new scenario. The test has to be executed several times on b
-
Does anyone know where Safari might hide old security certificates?
In a vein similar to the questions of where Safari is getting the data for the url address autocomplete, does anyone know where Safari might hide an old security certificate? Apple Care could not help me, and the their final suggestion was to reinsta
-
How to store data in KM from a JSP file
Hi In our portal we have a JSP file with a text view where the user can add notes/things to remember etc. I need somewhere to store that information. I don't want to store it directly on the portalserver or the backendsystem. Is there a way to store
-
Flashing question mark on startup Mac Pro 1,1
hi everybody, I have an issue with my Mac Pro 1,1. I bought this computer last week. Occasionally, at the start up, the screen show a flashing question mark inside a folder. I know this is a HD problem. Since it doesn't show the question mark every t
-
After update to cs3, video files aren't recognized
I created a project in cs3. Adobe update manager told me I had an update, so I saved my project, exited cs3, installed the updates, restarted my pc (win xp pro 32 bit) and when I loaded the project, the video files are all shown as off line. When I t