jQuery slideshow with captions

Hello again, I have another question about a jquery Slideshow. A few weeks back, I had a few questions about creating a slide show in Dreamweaver, and thanks to Ben Pleysierauteurs, I have what I'm looking for in a slide show.

Now I'm looking to include captions as well... I went through the edition of images in photoshop to include captions, but it takes a long time, and I can't do the captions for all the match the way I have with the images.

I've been looking around online, and I see that it is possible to include captions with jquery slideshows, but when I start reading in what I see, he loses just me... My understanding of web design is basic html.

I used the second slideshow coding from the link given to me by a few weeks back from this site:

http://www.webtuts.info/webdesigning/jQuery-slideshow-tutorial-beginners/933/

Is it possible to add captions to the slide show I have or should I start over?

Thank you once again.

my understanding of the coding is Basic... I get to basic html but after that I'm lost.

I'm afraid there is not much we can do to help you with your coding of deficits.  The cold hard truth is that DW expects that you understand the HTML, CSS and to some extent JavaScript.  If you want to do things advanced as image galleries, you must learn to work with the code.  It is not difficult. There are many tutorials online to help you.

Cycle2 is a slideshow/Gallery built on the jQuery JavaScript library.  If you're new to jQuery, it's the system to "Do more with less code" allowing designers to add all sorts of nifty widgets to their web sites with a minimum of manual coding.  It really is to learn to use.

Cycle2 has many options, including the legends/overlays and pagers with thumbnails if that's what you want.  See the links below for details and code examples for using the plugin.

Cycle2

Cycle2 demos

Pagers cycle2

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Receptive slideshow with captions

    I use adobe muse with the new reactive functionality and want to insert a slide show which is full width, with captions.  When I resize the browser photos behave, but the legends do not resize... stay full size. Anyone have any ideas?

    In other points of the stop size slider.

    or

    Click the right mouse button on the slider - 'hide in other breakpoints. In other breakpoints create new slider.

  • Embedded captivate SWF to create video slideshow with captions?

    Hello

    I'm pretty new to Captivate and is currently working with 5.5 on a Mac.  I've maybe upgrading to 6.0 soon, so let me know if that will solve the little challenge I'll have with video subtitling.

    I'm working on a project that will have a variety of content, including a lot of video.  I need to provide the captioning encoded video and figured out how to do this by placing the video "on stage" on the slide and have the bar of the reader of the skin with the cc.  The problem is that I want the bar of the player on the video slide show, then Player skin showing on all slides bar isn't an option.

    I can also bring in the video as an object, and then it comes already wrapped in the default Halo player with other drive options.  But for the life of me I can't understand how to add captions (or a cc button) to that player. I missed something?

    I came with the solution is to make each video in a single slide in captivate, that publish a swf file, and then translate the and place them on appropriate slides.  This way they can have captions and their own bar of the player, but I have other informational slides, quizzes, etc., without the bar.  I did a test of that and the only issue I found was that, when published the main project, the captivate zip file should automatically include the flv file.  This seems pretty easy to solve if I just unzip, add the flv file in the folder and re-zipper.

    As I said, it seems to be a solution.  But this project is intended for a LMS where the tech folk have already warned me that they have never have the SCORM implementation in a piece of leave the shelf reliable software.  And since I'm new to this, I want to make sure I'm not in a way that will give me problems on the road.  For reference, I have to pass on the results of the quizing, but we need to monitor the realization.

    In any case, am I missing something and should not have to use a work around in the first place?  Or is there a better way to do it?  Can I use a capioning place to do captions and give back me a bunch of swf (palyer with the video and the subtitles already built in) but I don't know which would be different from what I am attemption.

    Thanks in advance for your suggestions.

    There is another variable that controls the CC (sorry to forget!). It is cpCmndCC and works in the same way. Updated 0 mask legends, assigning 1 shows them.

    To combine them, I would create two shares of standard tip (not sure why Shekhar went with conditional). An action that affects cpCmndCC and cpCmndShowPlaybar both with 1 for the slide show video and an action that affects cpCmndCC and cpCmndShowPlaybar both with 0 for other slides. Then just run the Action appropriate, advanced, entering each slide.

    Personally, I warn against use by leaving. As often pointed out Lilybiri, the execution of an action at the exit of a slide can be risky, since you have reach the last image so he could run. If the user can navigate away from the slide before arriving at the end of the game, or if there is a pause before the end which climbs to another slide, the action will not run and the bar reading/subtitles remain visible.

  • I have a large collection of big slideshows in iPhoto, created over the years with captions from the titles of the photos. How can I keep these slide shows subtitled in Photos?

    I have a large collection of big slideshows in iPhoto, created over the years with captions from the titles of the photos. How can I keep these slide shows subtitled in Photos?

    You can't keep slideshows as captioned photos.  Slide shows get migrated in the form of albums for the Group of photos is maintained.  But Photos don't have the ability to add descriptions to the slide show so that they would have to be manually added to each slide automatically.

    However, a possible solution would be to export every slide show in iPhoto as a Quicktime movie file. Which will keep the titles and descriptions on each slide.  The resulting QT files can be imported into the iPhoto library before migration or photo library after.

  • Lining of the divs to the top, one with a fireworks html code with a jQuery slideshow

    I'm having a problem lining up two div in a div.  A div has an HTML inside fireworks (by the way, I can't understand why only the button States are not ' work.)  I inserted the code via the Insert menu > image objects > fireworks html, but for some reason, the work of button States.  When I open the navbar.htm in the file browser, it opens it in dreamweaver and it works perfectly in the live preview).  The other div has a simple jQuery slideshow.  I have these two div in comprehensive plu div named 'div id = wrapper.  How can I match these so that the nav div and body div flush against each other within the wrapper div tag?

    I intend to put the extra divs above and below the div wrapper for more content.  If someone understand why the fireworks html code does not work when inserted, would be great!

    Here is the code:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    " < html xmlns =" http://www.w3.org/1999/xhtml ">

    < head >

    < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

    < title > Richard J. Craddock Designs < /title >

    < script type = "text/javascript" >

    var _gaq = _gaq. [];

    _gaq.push (['_setAccount ',' UA-3119473-8 ""]);

    _gaq.push (['_setDomainName ', 'none']);

    _gaq.push (["_setAllowLinker", true]);

    _gaq.push (['_trackPageview ']);

    (function() {}

    GA var = document.createElement ('script'); GA.type = ' text/javascript '; GA. Async = true;

    ga.src = ("https:" == document.location.protocol? ) https://SSL ' : ' http://www ( ') + «.google-analytics.com/ga.js ";

    var s = document.getElementsByTagName ('script') [0]; ParentNode.InsertBefore (ga, s);

    })();

    < /script >

    < link href = "stylesMain.css" rel = "stylesheet" type = "text/css" / > "

    < style type = "text/css" >

    {body

    background-color: #2f2f2f;

    width: 50 Ms.

    }

    . FadeIn {position: relative; height: 332px; width: 500px ;}}

    . FadeIn img {}

    position: absolute;

    left: 0px;

    top: 0px;

    width: 784px;

    } td img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}}

    < / style >

    "< script src="scripts/jquery.min.js "> < / script >

    < script >

    $(function() {})

    $('.fadein img:gt(0)').hide();)

    setInterval (function () {$('.fadein_:_first-child').fadeOut ().next('img').fadein () .end () .appendTo ('.fadein');}, 3000);

    });

    < /script >

    < / head >

    < body >

    < div id = 'wrapper' >

    < div id = "navdiv" >

    < table style = "" display: inline-table; "border ="0"cellpadding ="0"cellspacing ="0"width ="148">"

    <!-fwtable fwsrc = "craddocknavbar.png" fwpage = "Page 1" fwbase = "craddocknavbar.jpg" fwstyle = "Dreamweaver" fwdocid = "1729580248" fwnested = "0" - > "

    < b >

    "< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="148"height ="1"border ="0"id ="undefined_2"/ > < table >

    "< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="1"border ="0"id ="undefined_2"/ > < table >

    < /tr >

    < b >

    " < td > < a href =" http://www.rjcraddockdesigns.com/Company profile.php "target ="_self"onmouseout ="MM_nbGroup ('out'); "onmouseover =" MM_nbGroup ('over', 'craddocknavbar_r1_c1_s1',' images/craddocknavbar_r1_c1_s2. jpg', 'craddocknavbar_r1_c1_s4.jpg', 1); " "" onclick = "MM_nbGroup ('down', 'navbar1', 'craddocknavbar_r1_c1_s1', ' images/craddocknavbar_r1_ c1_s3.jpg', 1);" > < img name = "craddocknavbar_r1_c1_s1" src = "images/craddocknavbar_r1_c1_s1.jpg" width = "148" height = "65" border = "0" id = "craddocknavbar_r1_c1_s1" alt = "" Richard J. Craddock, landscaping to Nantucket: company profile "/ > < /a > < table > "

    "< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="65"border ="0"id ="undefined_2"/ > < table >

    < /tr >

    < b >

    " < td > < a href =" http://www.rjcraddockdesigns.com/services.php "target ="_self"onmouseout ="MM_nbGroup ('out'); "onmouseover =" MM_nbGroup ('over', 'craddocknavbar_r2_c1_s1',' images/craddocknavbar_r2_c1_s2. jpg', ' images/craddocknavbar_r2_c1_s4.jpg', 1); " "" onclick = "MM_nbGroup ('down', 'navbar1', 'craddocknavbar_r2_c1_s1', ' images/craddocknavbar_r2_ c1_s3.jpg', 1);" > < img name = "craddocknavbar_r2_c1_s1" src = "images/craddocknavbar_r2_c1_s1.jpg" width = "148" height = "65" border = "0" id = "craddocknavbar_r2_c1_s1" alt = "" Richard J. Craddock, landscaping to Nantucket: Services "/ > < /a > < table > "

    "< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="65"border ="0"id ="undefined_2"/ > < table >

    < /tr >

    < b >

    "< td > < img name ="craddocknavbar_r3_c1_s1"src ="images/craddocknavbar_r3_c1_s1.jpg"width ="148"height ="395"border ="0"id ="craddocknavbar_r3_c1_s1"alt =" "/ > < table >

    "< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="395"border ="0"id ="undefined_2"/ > < table >

    < /tr >

    < /table >

    < / div >

    < div id = "bodydiv" >

    < div class = "fadein" >

    "< img src="images/slideshow/1jquery.jpg ">

    "< img src="images/slideshow/2jquery.jpg ">

    "< img src="images/slideshow/3jquery.jpg ">

    "< img src="images/slideshow/4jquery.jpg ">

    "< img src="images/slideshow/5jquery.jpg ">

    "< img src="images/slideshow/6jquery.jpg ">

    "< img src="images/slideshow/7jquery.jpg ">

    "< img src="images/slideshow/8jquery.jpg ">

    < / div >

    < / div >

    < / div >

    < div id = "navigationlower" >

    " < p > < a href =" http://www.rjcraddockdesigns.com/index.php "title =" Home Page models Richard J. Craddock "" > home < /a > - < a href = " " http://www.rjcraddockdesigns.com/company "" profile.php ' title 'Richard J. Craddock Designs' = > profile < /a > - < a href = " http://www.rjcraddockdesigns.com/services.php "title =" Richard J. Craddock Designs "> Services < /a > < /p > "

    < strong > Richard J. Craddock Designs, 2011 < facilities > < / p >

    " < p > < strong > < a href =" http://cwws.org "title = 'Web of common wealth Solutions' target ="_new"> Designed by CWWS < /a > < / strong > < / p > "

    " < p > < a href =" https://www.Facebook.com/RJCLandscapeDesigns "> < img src ="facebook icon.png"width ="60"height ="60"/ > < /a > < /p > .

    < / div >

    < / body >

    < / html >

    Layout 2-column next looks a lot like what you're aiming for.

    View source in the browser to see the CSS & HTML code.

    http://ALT-Web.com/templates/2-Col-fixed-layout.shtml

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Help with captions, in slide shows

    I am struggling with trying to figure out how to customize the size and the location of the legend boxes within each image in a slide show. It seems that, once an initial caption box has been set in the first image, it appears in images to the same location and size, with no way to control them individually. I forgot something? Is there a way to customize the size and location of all the legends in a slide show? Your help/advice would be greatly appreciated.  ~ Thank you

    MCO, I had the same question and it has helped me:

    Thumbnail with release of the slide show:

    1. go to slide show options and check the thumbnail option. (Doing so the tiles will become visible)

    2. follow the same steps given under "Slideshow with thumbnail" updated legends

    3. once the captions are up to date, go to slide show options and disable thumbnails.

    (If your slideshow thumbnails, just use to select individual screens, where you can change your captions)

  • JQuery Slideshow problem in Internet Explorer

    I have a Jquery slideshow on my page and it works fine in FireFox, but Internet Exploer 8, the transaction between JPEG photos are not smooth. Can someone help me know what code I need to smooth the slideshow in IE8 or lower. I'm new to coding and I created the below coding using tutorial and reading on the Dreamweaver forum thread. I'm much apperciated if you can help me and let me know where to get the coding.

    Slideshow DIV (class = "slideshow") lies in an another div (class = "slideshow"). I have post the slide show using CSS to fleet to the right with the box width 610px, 500px height.

    I copied all my code, I have for the slide show.

    <!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"><!-- InstanceBegin template="/Templates/main_templateV4.dwt" codeOutsideHTMLIsLocked="false" -->

    <!-- saved from url=(0014)about:internet -->
    <!-- this and above comment should be removed for live, non-demo use -->

    < head >

    <style type="text/css">

    .slideshow {
         width: 610px;
         height: 500px;
         margin-top: 0;
         margin-right: auto;
         margin-bottom: 0;
         margin-left: auto;
    }

    .slideshow img {
         padding: 5px;
         border: 1px solid #ccc;
         background-color: #CCC;
         height: 400px;
         width: 580px;
    }

    </style>

    <!-- include jQuery library -->

    <script type="text/javascript" src="jquerySlideshow/jquery.min.js"></script>
    <!-- include Cycle plugin -->

    <script type="text/javascript" src="jquerySlideshow/jquery.cycle.all.min.js"></script>

    <!--  initialize the slideshow when the DOM is ready -->

    <script type="text/javascript">

    $(document).ready(function() {

    $('.slideshow').cycle({

    fx:    'fade',
    speed: 2000,
    timeout: 1000
    });

    });


    </script>

    < / head >

    <body>

    <div class="slideShow">
        <div class="slideshow">
        <img src="_images/home/3d view roof.JPG" width="580" height="400" />
              <img src="_images/home/Bridge.png" width="580" height="400" />
              <img src="_images/home/Haz Restaurant, St Pauls, London.JPG" width="580" height="400" />
              <img src="_images/home/Isometric view.JPG" width="580" height="400" />
              </div>
        </div>

    </body>

    i2008 wrote:

    Slideshow DIV (class = "slideshow") lies in an another div (class = "slideshow").

    Although the browsers treat normally class and the names of ID as case-sensitive, you can't count on it 100%. It is also very bad practice to use the same name for different purposes and depend on the difference between upper and lower case in just a letter to distinguish between them. Even if browsers getting respect for case-sensitive, it is likely to confuse you. Give them distinctive names like the slide show and slideshowWrapper.

    The other bad practice that you have adopted is the use of spaces in the file names. For example, you have this:

    Haz Restaurant, St Pauls, London.JPG
    

    Shorten the name and use underscores to separate words. It's also a good idea to use the tiny for the file name extension (.jpg instead of.) (JPG).

    Haz_Restaurant.jpg
    

    These fixing points could solve the instability in Internet Explorer, but you will probably also need to experiment with the slide show's settings.

    $(document).ready(function() {
        $('.slideshow').cycle({
            fx:      'fade',
            speed:   2000,
            timeout: 1000
        });
    });
    

    Try changing the value of the speed (2.5 seconds) of 2500 or 3000 (3 seconds). The timeout value can be necessary to change, too.

    Dynamic effects JavaScript are based not only on the browser, but also the capacity of the computer's processing. Some browsers are more effective than others. Processing capability JavaScript IE is known to be less effective in many cases, although this should improve with IE9.

  • jQuery slideshow question

    Hello

    Here is the link to the page with the slider: http://www.juliepb.com

    * Problem: Slideshow keeps returning to the last image (slide 5) between each slide.

    I use simple slideshow of jon raasch and want to display successively the 5 slides. Everyone has an image and a sidebar w/text and a link.

    Source code: lines 50-110

    CSS/general_styles. CSS: lines 174-272

    JS/slideswitch.js

    Any help or advice is appreciated.

    -Julie Barnes

    Hello

    They are many and better stuff jQuery (many have had problems with the simple slide show), try one of them - http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/.

    The problem with simple slide show is that it stacks up images, and including everything except images can (and often do) launch the slideshow out of sync, but it says for a slide show of pictures 4-8, it works.

    PZ

  • How do you define in a slideshow with music on iPhone 5 s

    How'd I use my IPhone to have a slideshow with music

    Can how I set up my phone I 5S for a slideshow with music

  • How to share a photo slideshow with Mac &amp; PC people

    I developed a slide show on my iMac from Photos. How to share the slideshow with friends, some with Apple devices and some with PC devices?

    export Photos as a gesture of Quicktime - which runs on a Mac or a PC (the PC must have the free QuickTime installed)

    LN

  • Sharing of software (slideshows with effects)

    What is a shared program of photo safe and free to download for use with Windows 7 (for slideshows with effects such as fading and eventually add music).

    http://www.howtogeek.com/HOWTO/15714/create-a-slide-show-in-Windows-7-Media-Center/ If this post answered your question, click Mark as answer.

  • Windows media center - slideshow with music stops at the beginning

    Hi, trying to create a slideshow with music. The track is 3,30 long, has 53 photos to 4 second transition, but it stops the music in 3 minutes. It is said in the 3 minutes selected editing area. How can I fix it?

    Hello

    To change the settings of your slide shows, see the following Microsoft article.

    Create slideshows with music in Windows Media Center: http://windows.microsoft.com/en-us/windows7/Creating-slide-shows-with-music-in-Windows-Media-Center

    Your photos on the big screen: create slide shows in Windows Media Center: http://windows.microsoft.com/en-US/windows-vista/Your-pics-on-the-big-screen-Create-slide-shows-in-Windows-Media-Center

    Working with pictures in Windows Media Center: frequently asked questions: http://windows.microsoft.com/en-us/windows7/working-with-pictures-in-windows-media-center-frequently-asked-questions

  • Can you import a Camtasia (MP4) video released and change with captions in Captivate?

    Can you import a Camtasia (MP4) video released and change with captions in Captivate?

    You can import video as any another video, but you will not be able to change the video itself. If you want to do this, create a video demo and use the demo in Captivate video editor, which allows you to add and synchronize animations and static objects.

  • How do you export a video with captioning for Brightcove?

    Hello...

    I try to export videos with captioning specifically for Brightcove and can not get the closed captioning to appear in the player.  Can anyone help?

    If the legends are exported or incorporated into Premiere Pro and they decode and play correctly re-imported in the BODY and other players like QuickTime, you'll want to talk to someone at the wire with Brightcove, if the subtitles are not displayed in their player.

  • I am trying to create a slideshow with Adobe Photoshop 12.  After a few episodes to work on it, some of the slide pictures disappear.  Very frustrating.  Why?  I'm to access photos from the catalogue and folders on my computer.  E

    I am trying to create a slideshow with Adobe Photoshop 12.  After a few episodes to work on it, some of the slide pictures disappear.  Very frustrating.  Why?  I'm to access photos from the catalogue and folders on my computer.  Disappearances seem random.

    Elements Photoshop Elements

Maybe you are looking for

  • Bootcamp for Windows 10 update hangs on the Logo

    Hi all! I am trying to install a functional copy of Windows 10 in Bootcamp on my Mac Mini. The problem is that when I try to upgrade Windows 8.1, it hangs of process to her halfway through to Windows logo through the process and did not move for days

  • iPhotos

    Is there a way to force iPhotos to update the collection of faces?  10.11.6 running

  • I can't connect to a website today. I got up to our days. Why?

    I use daily "royalgames.com" to play games. The site requires the username and password I already have. Until today, I had no problem connecting. Today, all of a sudden when I enter my password and click "enter" firefox gives me "Unable to connect" m

  • error of glue

    I put my recovery disk in to my packard bell Windows xp, do a quick formatt and I now I get error of glue 5 press any key to contuie and didn't have not a windows 98 boot disk can u help me and tell me what I did and what I need to do to get my syste

  • Automatic download occurs on-screen connection for XP Pro. Help!

    In my class, we use Windows XP Pro and I have a program installed to catch all downloads in a buffer (Norton Autoback). The buffer fills the log on screen after an hour or two, thats why something is automatically downloading, but I have all autodown