Adding a textbox to an image slideshow

Hi. I am using Dreamweaver CS6 for my website and now I have a very basic question: how do I replace an image over text (a text box?) in a slideshow using javascript? Meaning, I have a gallery of thumbs and when i click on the last thumb instead of an image, a text box should appear. How can I do it?
<a href="javascript:;" onclick="MM_swapImage('main','','images/S_07.jpg',1)"><img src="images/t_07.jpg" alt="t_07" name="t7" width="84" height="56" id="t6" border="0" /> </a>

Use Fancybox2. It supports images, divs, data, forms, videos, or almost anything else you care to use.
http://fancyapps.com/fancybox/
Nancy O.

Similar Messages

Hi Guys, Just added the widget for Spry Image Slideshow...HELP!

How do I add my own pictures the the slideshow? I'm not the best with this so your help would be amazing!!!
Please reply
Thanks,
Oli

Gramps

SPRY Image Slideshow, compatibility problems with IE

Hello, i recently used the Spry image slideshow in my website. All works great in every browser except IE. I could actually get it to work when i changed the DOCTYPE from: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> TO: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
BUT,
that totally skrewed the rest of my content. also i added the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > and that fixed the slideshow, but again skrewed my content.
Has anyone found a solution? i looked through past discussions but couldnt find one.

mdr4win wrote:
i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
I have noticed that you ignored my solution; your document still shows two bodies.
Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
How did you determine that the slideshow was not working correctly in IE and which versions of IE?
Grumps

SPRY IMage SlideShow Basic: Auto create UL LI list

Hope this is of some help to someone.
Recently moved from CS3 to CS5. So new to the whole DW widget thing.
I wanted a basic (no thumbs or titles) slideshow that will auto update when new images are added or removed from an image folder so I don't have to constantly edit the slideshow <UL> list each time I add or remove an image from the image folder/dir
My solution:
I replaced the <UL><LI></LI></UL> code block in my slideshow web page with some php code that will auto create the <UL> list from a folder of images.
I created a folder with only my slideshow images. (.png, .gif and/or .jpg only). I now can add/remove image files from this folder and my slideshow updates automatically.
Seems to work well. My use is for a simple slideshow with no titles or thumbs.
web page code that has replaced the <UL></UL> block of images to display.
add to the top of your slideshow html page (
<?php
require('includes/dir2ul.php'); // path to where you put the dir2ul.php functions file
?>
replace your slideshow webpage SPRY Basic Slideshow <UL> block with the code below with the changes commented with !! Important
<?php
// Fill in the <UL> needed by Spry basic slideshow widget with a php dump of all files in a directory ending with .PNG/.GIF/.JPG to a <LI> element list
$my_dir = './my_slideshow-1/';        //!!!! IMPORTANT: change to your slideshow image directory path as shown (yes, ends with a slash)
$spry_slideshow_id= 'SPRY_ImageSlideShow_3'; //!!!! IMPORTANT: change to your SPRY slideshow ID
dir2ul($my_dir, $spry_slideshow_id);
?>
The php function dir2ul.php (and support functions) code you need to require at the to of the slideshow page.
Put this code in a file named dir2ul.php (as used in this example) and save it somewhere that you include (require) in your slideshow web page.
<?php
function dir2ul($my_dir, $spry_slideshow_id) {
// Fill in the <UL> needed by Spry basic slideshow widget with a php dump of all files in a directory ending with .PNG/.GIF/.JPG to a <LI> element list
// $my_dir : image directory
$dir_handle= opendir($my_dir);
if (!$dir_handle) {
print '<p>ERROR opening directory specified: ' . $my_dir . '</p>';
else {
//success opening directory
/* loop thru the directory. */
print '<UL id=' . $spry_slideshow_id . '>';
while (false !== ($file = readdir($dir_handle))) {
     // !!works best/faster if you keep your image directory all files. is_dir not a perfect check!!
     if(!is_dir($file) && ($file != ".") && ($file != "..")) {
       // !!!!IMPORTANT: change if needed. Only select files ending with .JPG, .JPG, or .PNG (case insensitive!)
       if(EndsWith($file, '.JPG') || EndsWith($file, '.GIF') || EndsWith($file, '.PNG') ){
         print '<li><img src="' . $my_dir . $file . '"/></li>';
     else {
        // directory: ignore (not recursive)
       //print '<p> >> Directory: ' . $file . '\n</p>';
   } // while
   echo '</UL>';
} //else
function EndsWith($FullStr, $EndStr) {
     // Get the length of the end string
     $StrLen = strlen($EndStr);
    $FullStrEnd = substr_compare($FullStr, $EndStr, -$StrLen, $StrLen, true);   // case insensitive
    //$FullStrEnd = substr($FullStr, strlen($FullStr) - $StrLen);   // case sensitive
    //print '<br> >>FullStr=' . $Full_Str . ' >>EndStr=' . $EndStr . ' >>-StartPos=' . -$StrLen . ' >>length_to_compare=' . $StrLen . ' >>return=' . $FullStrEnd;
    return $FullStrEnd == $EndStr;
function is_dir_LFS($path){
return (('d'==substr(exec("ls -dl '$path'"),0,1))?(true):(false));
?>

I don't know what to say....I tried all night it didn't work. As soon as I posted my question on the forum the slideshow starts running....wow....I'm speechless. Thanks all who's looked at my post.
Loci

Spry Image Slideshow with Filmstrip controls showing ABOVE images?

Hi all,
I've never used these forums before and apologise in advance for my first discussion being a request for help!
I recently added the Spry Image Slideshow with Filmstrip to a page and am not sure which property I need to modify to get the controls to show on top of the image. I think this is an issue with the two column layout I'm using but am not knowledgeable in the least about code and would appreciate your help.
http://gailspantry.com/testindex.
Many many thanks!
Rune

Hi folks, any ideas re this issue? Really hope someone can help.

Spry Image Slideshow with Filmstrip, thumbnail problem in Safari

I'm adding a spry image slideshow with filmstrip in Dreamweaver CS5 on a Mac. I have a folder of images with a large and small (Thumbnail) version of the photos I'd like to use. I've relinked all of the images that are inserted as placeholders by the widget: Source for thumbnail versions and link for large versions. When I preview in Firefox all is well. When I preview in Safari, the filmstrip has white boxes rather than the thumbnail images. Everything else is fine. (It previews correctly in Safari before I change the links.) What am I doing wrong?

I have a similar problem. I've added a note to reference your problem. I've not got an answer to date.
Cliff

Flash Image slideshow help

Hello,
I am trying to make a image slideshow for my companies new website.
I used the Flash Image Viewer plugin from Dreamweaver, but it doesn't contain the transitional effect desired.
Every tutorial I find talks about advancing the images through an interactive control, I just want the images to change by themselves and do a fade transitional effect between images.
Can anyone please point me to a tutorial that has this w/o the intractive buttons? I have been looking on the internet for hours and can only find tutorials / example w/ the intractve controls.
Thank You for any positive direction in this.

Hmm... no luck so far. Thank You though for your suggestion.
I am really "green" to flash and was only confused by the template provided by Flash.
All I need to do is have images fade in and out of each other and then repeat over and over.
I know this isn't too hard. I found a tutorial that showed how, but my Firefox decided to close and I lost the page and haven't been able to find it since. Tried the history log, but no luck.
I will keep searchin...I know it's out there.

Spry Image Slideshow does not work in Explorer

My spry image slideshow works fine in Safari and Firefox, but does not work in Explorer.
A small box shows up in IE 8, and absolutely nothing shows up in IE 7.
www.epaaudio.com
Any Suggestions?

How did you get your slideshow to play in Internet Explorer? I'm using the same slideshow on my new website and it plays fine in everything but IE versions. Here's a test page I'm working on... http://4034.sandbox.i3dthemes.net/oceankayakbanzai.html
I looked at the code for your page and didn't notice anything different on mine. But yours works... Let me know if you have any suggestions. Thanks!

Spry UI Image Slideshow preview in IE8

Hello, sorry to re-ask a tired question, but I've scoured the forums and can't get a handle on the answer.
My issue: I have inserted the Spry Image Slideshow 7.1 widget in my dreamweaver (CS5) doc (thank you Widget Browser!), and made the necessary modifications. It shows up perfectly when previewing in Firefox and Opera. In IE8, the images display but in unordered list form only.
Things to note: I have NOT uploaded anything to the server yet, neither docs nor images, so unfortunatley I can't lead you to live view. Also, actually it is 2 slideshow widgets set side by side using a 2 column table. This might sound messy, but it did work in PREVIEW for all other browsers.
Here is the Spry-UI1.7 code:
@charset "utf-8";
/* SpryImageSlideShow.css - version 0.1 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
.ImageSlideShow {
    position: relative;
    width: 274px;
    height: 200px;
    overflow: hidden;
    border: 0px solid black;
.ImageSlideShow .ISSClip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
.ImageSlideShow .ISSView {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
.ImageSlideShow .ISSSlide {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;     /* FIX FOR IE6/7 */
    height: 100%;     /* FIX FOR IE6/7 */
.ImageSlideShow .ISSControls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
.ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
    display: none;
.ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
    position: absolute;
    top: 0;
    display: block;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    text-indent: -10000em;
.ImageSlideShow .ISSPreviousButton {
    left: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-back.gif);
    background-position: left center;
.ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
    opacity: 0.5;
    filter: alpha(opacity=100);
.ImageSlideShow .ISSNextButton {
    right: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-forward.gif);
    background-position: 100% 50%;
.ImageSlideShow .ISSPlayButton {
    left: 30%;
    width: 40%;
    background-image: url(ImageSlideShow/iss-play.gif);
    background-position: center center;
/* If the slide show is busy, show the busy icon in the view. */
.ImageSlideShow.ISSBusy .ISSView {
    background-image: url(ImageSlideShow/iss-busy.gif);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    filter: alpha(opacity=100);
/* If the slide show is playing, change the play button image to "pause" */
.ImageSlideShow.ISSPlaying .ISSPlayButton {
    background-image: url(ImageSlideShow/iss-pause.gif);
/* Don't show the player controls if the slide show is busy! */
.ImageSlideShow.ISSBusy .ISSPreviousButton,
.ImageSlideShow.ISSBusy .ISSNextButton,
.ImageSlideShow.ISSBusy .ISSPlayButton
    display: none;
If anyone sees anything outlandish sticking out to them, please let me know. I am super excited about the look of these widgets on our home page- thank you Spry & Dreamweaver teams!! Sorry again for not having a live view for you at this time.
Matt G.

Hello, sorry to re-ask a tired question, but I've scoured the forums and can't get a handle on the answer.
My issue: I have inserted the Spry Image Slideshow 7.1 widget in my dreamweaver (CS5) doc (thank you Widget Browser!), and made the necessary modifications. It shows up perfectly when previewing in Firefox and Opera. In IE8, the images display but in unordered list form only.
Things to note: I have NOT uploaded anything to the server yet, neither docs nor images, so unfortunatley I can't lead you to live view. Also, actually it is 2 slideshow widgets set side by side using a 2 column table. This might sound messy, but it did work in PREVIEW for all other browsers.
Here is the Spry-UI1.7 code:
@charset "utf-8";
/* SpryImageSlideShow.css - version 0.1 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
.ImageSlideShow {
    position: relative;
    width: 274px;
    height: 200px;
    overflow: hidden;
    border: 0px solid black;
.ImageSlideShow .ISSClip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
.ImageSlideShow .ISSView {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
.ImageSlideShow .ISSSlide {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;     /* FIX FOR IE6/7 */
    height: 100%;     /* FIX FOR IE6/7 */
.ImageSlideShow .ISSControls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
.ImageSlideShow .ISSFirstButton, .ImageSlideShow .ISSLastButton {
    display: none;
.ImageSlideShow .ISSPreviousButton, .ImageSlideShow .ISSNextButton, .ImageSlideShow .ISSPlayButton {
    position: absolute;
    top: 0;
    display: block;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    text-indent: -10000em;
.ImageSlideShow .ISSPreviousButton {
    left: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-back.gif);
    background-position: left center;
.ImageSlideShow .ISSPreviousButtonHover, .ImageSlideShow .ISSNextButtonHover, .ImageSlideShow .ISSPlayButtonHover {
    opacity: 0.5;
    filter: alpha(opacity=100);
.ImageSlideShow .ISSNextButton {
    right: 0;
    width: 30%;
    background-image: url(ImageSlideShow/iss-forward.gif);
    background-position: 100% 50%;
.ImageSlideShow .ISSPlayButton {
    left: 30%;
    width: 40%;
    background-image: url(ImageSlideShow/iss-play.gif);
    background-position: center center;
/* If the slide show is busy, show the busy icon in the view. */
.ImageSlideShow.ISSBusy .ISSView {
    background-image: url(ImageSlideShow/iss-busy.gif);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    filter: alpha(opacity=100);
/* If the slide show is playing, change the play button image to "pause" */
.ImageSlideShow.ISSPlaying .ISSPlayButton {
    background-image: url(ImageSlideShow/iss-pause.gif);
/* Don't show the player controls if the slide show is busy! */
.ImageSlideShow.ISSBusy .ISSPreviousButton,
.ImageSlideShow.ISSBusy .ISSNextButton,
.ImageSlideShow.ISSBusy .ISSPlayButton
    display: none;
If anyone sees anything outlandish sticking out to them, please let me know. I am super excited about the look of these widgets on our home page- thank you Spry & Dreamweaver teams!! Sorry again for not having a live view for you at this time.
Matt G.

Image slideshow in FCE project - output for a computer monitor

Hi
I tried using iPhoto to export a QT file of an image slideshow. I thought it'd be a quick and dirty way to get an image slideshow for a short film. Rather too dirty, though. I guess there is heavy compression used, because the image quality is poor.
Also, I'm getting some kind of interlacing issues (flickering). I know I should be viewing on a TV, but this project is for output on a computer display.
I tried download StillLife, but this is also giving me poor quality images. I think of myself as having a fairly good grasp of resolution issues, but I can't quite get my head around what I need to do. Do I have to simply import each JPEG into FCE and add keyframed movement manually? Will this help resolution/output issues?
Many thanks

.. I tried using iPhoto to export a QT file of an image slideshow....
I would start here to play on the knobs&sliders ..
what were your settings for export? "QT file" => that is many dozends of options of compression, codecs, resolutions, etc. pp ...
the consumer apps FCE and iM are meant for TV display only => reduced res + reduced colors, quality reduced due to interlace (due to TV standards) ...-
a Full Res, h264 encoded qt.mov should display your photos in shining quality ...

Spry Image Slideshow Thumbnail's do not show properly

Hello World!
This is my first time using the forums here at Adobe.
My problem is that I have inserted a Basic Spry Image slideshow like so:
The size is ~ 250px by 200px
And once I go into live view, the slide show only displays the top right corner and not the whole image itself. I tried downsizing the image in design view to "look" like the same size of the thumbtails below but that did not do anything.
In my local file(not sure if you can see to the left) my images are saved in a file called 'images', and thumbs in a subfolder called 'thumbs'. (I read that images need to have same scr and link names?)
If anyone can help me out that would be great!! Thanks guys!

Okay, so I found my error, my Link photo was super duper big!
I played around with the resizing and it fitted better.

Center Spry Basic Image Slideshow on the webpage in Dreamweaver Cs6   ?

Hi, I'm working on a Website for a client in Dreamweaver CS6: northstarconservancy.org. How do I center the Spry Basic Image Slideshow on the pages? I've tried a few options and nothing has been effective, anyone? Thanks, Amanda

It would be easier to give you exact instructions if we could see your page. Do you have a link you could share?
In general, place a div on your page and give it the basic css for centering...
#divid {
     width:800px; (you can change the 800 to whatever width your slideshow uses)
     margin:auto;
Then place your slideshow within that div in your html...
<div id="divid"> all your spry slideshow info </div>
As long as you haven't used APDivs, or position:absolute on your site, which you should never do unless absolutely necessary (pun kindof intended), the div that the slideshow resides in will be centered within it's container.

How to create an image slideshow?

Hello,
I am a beginner in web design and I need your help somewhere.
Please look at the follwoing website: www.safaribig5.com
Considering the image slideshow at the top of the home page, how do I add it to a webpage that I'm currently desiging in Dreamweaver?
I also want to know how to add links to images in the slideshow.
Your help in this matter would really be appreciated.
Thanks.

I personally like Nivo and Wowslider.
I've never used the one I posted above. As far as I can tell, that's the one that was used in the example given by the OP.

Single Thumbnail activate multiple page(image) slideshow?

I want to be able to have a single thumbnail from a lightbox slideshow visible on a webpage. That when clicked activates a slideshow with multiple images...not mulitple images on a single page like in the tutorial where the social network icons pop up, but rather that triggers an independent multipage slideshow.
Whenever I add an image it adds a thumbnail. I want one thumbnail to be seen for a 7 image slideshow. I can't figure out how to do this with the triggers. The tutorial also doesn't seem to address this.
Right now what I'm doing is creating a lightbox slideshow, turning all the thumbnails in all states transparent, then hiding the collection of thumbnails behind an image (the image being the single thumbnail I want displayed) but this is getting cumbersome with some many transparent lightboxes next to each other.
Is there a easier way. Its for a portfolio site, and each thumbnail should trigger a new project slideshow.

I am having the exact same issue as englishm87. I would like to have a portfolio page with a grid of theumbnails. Each thumbnail will then trigger the multipage slideshow. There is an example on the Adobe Muse website here:
http://www.adobe.com/products/muse/eliana-t-stein.html
I don't quite understand how you can nest the composition widget with the slideshow widget...
Could you provide more of a step by step answer?
Thanks!

Fading images slideshow

I am looking to create a fading image slideshow to use in Dreamweaver. I created in flash but having problems viewing in internet explorer. Wanted to know if there was an easier way to do this.

Yes.
Flash is a very bad idea on the web because the world's most popular mobile & tablet devices don't support it. And for those that do, Flash makes mobile device batteries run down in seconds rather than minues.   So don't use Flash.
Cycle2 is a nice jQuery fading slideshow that's very easy to implement and works in X-browsers.
Simply copy & paste the following code into a new, blank document. SaveAs test.html. Change images to your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="700"
>

<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">

</div>
</body>
</html>
Nancy O.

Adding a textbox to an image slideshow

Similar Messages

Maybe you are looking for