JQuery Slideshow inside a tank made in photoshop?

Is this possible?

my 'container' is a banner for the top of the page of Web sites. It has been cut with a border around it and information within the banner.

I would like to know how I can kind of get a slide show inside this container, I have positions, all together and I have 3 test photos, I can use.

Also, I would like to know if it is possible to integrate a navigation bar created in fireworks in a right to the empty space under the banner, or I would be better to make this transparent area and just move the bar in dreamweaver until it is where I want to?

It is a bit complicated, but all I really want to know is can I do where my static image is currently in a slide show. I have already composed slideshow, it works correctly how I want it.

Thanks for any help, I'm not dead set on the slide show I like it may not work. But if push comes to shove I will rig it so it does not hahaha.

I do it all the time.

To make the slide show, I use jQuery and Cross-Slide Tobia Conforto for jQuery plugin. There are instructions here and also has links to download jQuery.

I place cross-Slide and jQuery in a js folder in the Web site. It will be uploaded to the server with the rest of the site.

Then in Photoshop, I use the save for Web and devices to create JPEG, GIF or PNG files that are of suitable size for the site. If I need a text over the top image or a logo or other elements, I set above a layer in Photoshop and change underlying images below these layers to constitute a series. You can see an example of this type of layering here.

As you can see from this example, I indicated for images, all in a div which is just above the navigation.

The JavaScript code that makes the blades to change is here:

The div with the slide show is called #topslide. I have the names of 'generic' for each photo, so if my client does not like #3 of the series, it is easy to just make a new one and save it in my folder/images/banner, then download.

One thing to notice is that, after the call to HR-Chiro - Masthead04.jpg there is no comma. This is essential, because Internet Exploder will only show you the slideshow if you leave only by commas. Other browsers will be.

Tags: Dreamweaver

Similar Questions

  • 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.

  • Use the photos on my portfolio page, to create a header - javascript, jquery slideshow?

    Hello - full of the question:

    How do I use the photos on my portfolio page, to create a slideshow of the header which allows users to see (without scrolling down) which is below - "search for" a picture of a part and display in another (then get these photos to rotate)? JQuery, widgets, javascript?

    Obviously, I'm a total newbie!  Things have changed for 10 years when I made several sites!

    I realized a site that has a lot of pictures on it (like CSS) and I was wondering if someone could point my research in the right direction. Basically I want a slideshow in the header that uses photos of your thumbs on the page to display in the header. I presume this is a fetch command?  If I can get to 'recover' a photo I will then try and understand the part of transitions where to rotate images.  But I don't know the best place to start looking or what language would be preferable. I saw before I thnk.  He would smoke less bandwidth considerably because the images are re - used.

    Thanks for any help

    http://www.slidesjs.com/ is very good.  Here is also a 20 best jquery slideshow links http://vandelaydesign.com/blog/web-development/jquery-slideshow/

  • 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

  • don't me llega mi factura Escalin compra than I made in photoshop. y ahora me as soon as going to a caducar cuando me llegó el correo in the confirmation of mi compra. What hago, a'm, quien con quien me contacto?

    I made the photoshop compra y ahora me as soon as going to a caducar.

    how I can delivery esto?

    Contact Adobe:

    Contact the customer service

    Make sure that you are connected to your Adobe account when you contact them.

    Go to the creative forum Cloud for better help.

  • Why my jquery slideshow stop work on two of my sites?

    Two of my sites (www.KarenTalbotArt.com and www.RetTalbot.com) have a jquery Slideshow (index for Karen Talbot Art page and http://www.rettalbot.com/ret-talbot-photography-portfolio.html for Ret Talbot), and they worked without a hitch for a while and then all of a sudden stopped working. Now I just see all images of the slide show displays at once. I used to do a bit of coding, but I was out of it for awhile. I opened the code for two pages, and I have no idea where to start. I was hoping that there might be an easy fix, someone here will know before that I invest my day to resolve these issues. Thanks in advance!

    GitHub is not a CDN (content distribution network).  GitHub is a repository to download the scripts. You must not directly link to the script on Github because they do not have the appropriate headers, and will fail to load across many browsers, firewalls, and proxy servers.

    You can use safely scripts hosted on CDNs recognized as api Google, Microsoft, jQuery, Cloudflare and others.

    Personally, I prefer to use scripts hosted on CDNs as soon as I can because it makes the web faster for everyone.  However if you don't find your plugins on CDN, you must download the scripts & host them on your own servers.

    Nancy O.

  • How to load the CSS and JavaScript of JQuery UI inside edge led

    Hi I am using the JQuery UI inside edge slider but it doesn't work, I don't know what files should I download and how to include Javascript and CSS and images of the theme within the edge life, if someone has a code example from the compistionready what should I write on it and what is the folder structure files of the user interface and how to import them?

    Thanks in advance

    What is your configuration?

    1. you need to load the file ui.js as in this example for draggable. Include the correct version of jquery UI. If you need a file css then you load too.

    () yepnope

    {

    Nope:]

    "js/jquery-ui-1.9.2.custom.min.js,"

    ' css/jquery-ui.1.9.2.custom... min.css',.

    ],

    full: init

    }

    );

    2. / then you get your code for the slider - everything you need.

    function init() {}

    var mySlider = sym.$("mySlider");

    mySlider.draggable ({disabled: false});

    mySlider.draggable ({axis: "x"});

    }

  • 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

  • Impossible to get redirection page work after jQuery slideshow

    The web site index page uses jQuery and jquery. cycle2 to run a slide show. Once it is I did want to go to a new page, but have failed to operate. In the head meta tags ignore the slide show or do not work. Is it possible to add the page redirect to the cycle jQuery or would it be good idea ot have each image on a page separate and just in front of each of them?

    This is the jQuery scropt:

    <div id = "container" >

    "<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> < / script > .

    "<script src ="http://malsup.github.com/jquery.cycle2.js"> < / script > .

    <div align = "center" class = "cycle-slideshow" >

    "<img src="wwwroot/artwork/StudioNorth2Aa.jpg "width ="1060"height ="633"alt =" "/ >

    "<img src="wwwroot/artwork/StudioNW3Aa.jpg "width ="1060"height ="694"alt =" "/ >

    "<img src="wwwroot/artwork/StudioSWAa.jpg "width ="1060"height ="700"alt =" "/ >

    "<img src="wwwroot/artwork/StudioSouth1Aa.jpg "width ="1060"height ="664"alt =" "/ >

    "<img src="wwwroot/artwork/StudioEast2aa.jpg "width ="1060"height ="657"alt =" "/ >

    < /div>

    George

    You can use JQuery delay before the redirection. Count the number of seconds the slide show takes to display all the images then add below in thesection of your page - below is set to 20 seconds

  • "created the slideshow" inside loop problems (Windows Media Center) during playback

    Why didn't Windows Media Center during playback of a repeat of the start file "slideshow created with music" and / or "loopback", with only the first 20 or so (on perhaps a 100 total on the full slideshow) slides or photos over and over again without showing the rest of the majority of the slides at all?

    Hey trasel,.

    Unfortunately, it is not possible to include another small video clip for an existing video on which you have already created.

    However, you can create a new slide and add it to the existing one.

    Check out the link below howcreate 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

    Kind regards

    Savan - Microsoft technical support.

  • How to use Gallery of filters on an Image that I made from photoshop?

    So I edited this image of me on Photoshop basically I used the quick selection tool and then just back up my car and stuck on a transparent background and now I want to use in Illustrator and kind give as a funky look, you know as ocean waves or charcoal you know something like that but it wont let me it please help?

    in illustrator, you must track of images > photo high fidelity > expand first

    You can then use the effects

    or in photoshop, something like

    Image > adjustment > reverse

    image > adjust > curves to darken the face more

    Select background, and then apply a gradient orange

  • Made in Photoshop

    Photoshop has a community of social media like PicsArt or Instagram? I know it has bite but I don't see where you like on the photos you post.

    You can enjoy only project.

  • No idea how can I Center my jQuery slideshow?

    Longstaff Longstaff

    Depends on what you are trying to do, create a sensitive site or fixed width?

    At the moment suggests his do not respond as you have width set to images - width = "1247" height = "850".

    In this case, you need to change the width of the css #slideshow of 100% on 1247px as shown below:

    {#slideshow}

    Width: 1247px;

    height: 850px;

    Top: 0px;

    left: 0px;

    left margin: auto;

    margin-right: auto;

    padding-bottom: 20px;

    }

    This line then remove the piece of javascript coding that you have in the page below:

    Width: 100% ' / / width of the container (if the option "worthy" is true, the slides will be set on this as well width)

    A better slideshow might be cycle2

    Cycle2 start-up

    Cycle2

  • How can I resize an entire publication with a slideshow inside?

    VA discog.jpg

    I have built a panel tabs to the discography of the band and inside the composition is another composition for the words.  Is there a way to make it any smaller? I need build their mobile site and this is the version of office. They have dozens of songs and this comp is really complex, so it would take hours to resize each item. Please help! e

    You must do this manually when resizing the container, or you can create a resized container and more copy then other compositions.

    Thank you

    Sanjit

Maybe you are looking for