JQuery image slider

Hello,
I just bought a CSS3 image slider from envato marketplace and I think I did everyting as the creator explained in the read me file of how to implement it in your source code. But when I view it in a browser, I don't see any image, its just blank. The images are in the root folder. I tried alot but the only thing I see is blank images. Here's my whole html. You can skip the first html part. Is there anyone who had the same problem once or knows what the problem is? Thanks in advance
<!doctype html>
<html>
<head>
<meta name="description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta property="og:description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta charset="utf-8">
<title>Onze foto impressie</title>
<link href="css/general.css" rel="stylesheet" type="text/css">
<style type="text/css">
#header {
          background-color: #FFFFFF;
          text-align: right;
          height: 200px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5%;
          padding-right: 20%;
          font-size: 30px;
#page {
          font-family: arial, tahoma, verdana;
          font-size: 12px;
          line-height: 1.5em;
          color: #000000;
          text-align: left;
          float: left;
          margin-right: auto;
          margin-left: 13%;
          margin-top: 40px;
          padding-left: 20px;
          background-color: #FFFFFF;
          padding-right: 20px;
          border-top: 1px solid #E9E9E9;
          font-style: normal;
          font-weight: 400;
          min-height: 400px;
          max-width: 700px;
          padding-top: 20px;
          padding-bottom: 20px;
          clear: both;
#mainnav {
          font-family: arial, tahoma, verdana;
          font-size: 16px;
          color: #000000;
          margin-right: auto;
          margin-left: auto;
          background-color: #BDE1E8;
#mainnav ul {
          font-family: arial, tahoma, verdana;
          list-style-type: none;
          margin-left: 10%;
          margin-right: auto;
#mainnav ul li a {
          font-family: arial, tahoma, verdana;
          display: block;
          padding-top: 10px;
          padding-bottom: 10px;
          float: left;
          font-size: 16px;
          background-color: #9B9B9B;
          color: #FFFFFF;
          padding-right: 10px;
          padding-left: 10px;
          text-decoration: none;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          font-style: normal;
          font-weight: 400;
#mainnav a:hover, #mainnav a:active ,#mainnav a:focus , #mainnav a.thispage {
          font-family: arial, tahoma, verdana;
          background-color: #1B1B1B;
          font-style: normal;
          font-weight: 400;
h1, h2 {
          font-size: 20px;
.zoeken {
          position: relative;
          top: 25px;
          left: 40px;
          -webkit-transition: all 0s ease 0s;
          -o-transition: all 0s ease 0s;
          transition: all 0s ease 0s;
          color: #151515;
.zoeken:focus {
          width: 225px;
          border-color: #150CD5;
.glas {
          position: relative;
          left: 25px;
          top: 3px;
#search {
          position: relative;
          left: 50px;
          top: 25px;
          color: #0D0D0D;
.tel {
          position: relative;
          left: 552px;
          top: 0.1px;
</style>
<style type="text/css">
body {
          background-color: #ffffff;
</style>
<style type="text/css">
#footer {
          font-family: arial, tahoma, verdana;
          font-size: 12px;
          line-height: 20px;
          color: #000000;
          background-color: #FFFFFF;
          text-align: left;
          float: left;
          margin-left: 15%;
          margin-top: 25px;
          clear: left;
#footer ul   {
          list-style-type: none;
          float: left;
          text-align: left;
#footer ul li a {
          font-family:arial, tahoma, verdana;
          font-size: 12px;
          font-weight: normal;
          text-decoration: underline;
          text-align: left;
#footer a:hover   , #footer a:active, #footer a:focus, #footer a:visited{
          color: #000000;
          text-decoration: underline;
</style>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.kolom {
          font-family: arial, tahoma, verdana;
          padding-top: 10px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 10px;
          float: left;
          width: 120px;
          margin-right: 25px;
          margin-left: 25px;
          background-color: #FFFFFF;
          text-align: center;
          margin-top: 10px;
          border-right: 1px solid #000000;
.kolom1 {
          font-family: arial, tahoma, verdana;
          width: 200px;
          padding-top: 10px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 10px;
          float: left;
          width: 200px;
          margin-right: 25px;
          margin-left: 25px;
          background-color: #FFFFFF;
          text-align: center;
          margin-top: 10px;
          border-right-color: #000000;
          border-right-width: 1px;
          border-right-style: solid;
          font-size: 12px;
input::-webkit-input-placeholder {
          color: #161616;
input::-moz-placeholder {
          color: #161616;
input:-moz-placeholder {   /* Older versions of Firefox */
          color: #161616;
input:-ms-input-placeholder {
          color: #161616);
.kolom1 a {
          font-size: 10px;
          color: #000000;
    padding: 0;
    margin: 0;
body {
          background-color: #FFFFFF;
#wrap {
    display: block;
    height: auto;
          width: 620px;
          margin: 150px auto 0 auto;
    border: 10px solid #fff;
    position: relative;
#slideshow {
    overflow: hidden;
#slideshow ul {
    list-style-type: none;
    height: 100%;
    width: 500%; /*5 images by 100%. If you use 6 images you have to change the witdh into 600% */
    position: relative;
    left: 0px;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
#slideshow ul li {
    width: 20%; /*100% per 5 images. */
    height: 320px;
    float: left;
    position: relative;
#wrap input[type=radio] {
          position: absolute;
    visibility: hidden;
#wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    top: 360px;
    width: 11px;
    height: 11px;
          background-image: -moz-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: -o-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: -webkit-linear-gradient(top, #6dbfe8, #068ccf);
          background-image: linear-gradient(top, #6dbfe8, #068ccf);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    cursor: pointer;
#wrap label:not(.arrows):not(.show-description-label):hover {
   background-image: -moz-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: -o-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: -webkit-linear-gradient(top, #B0E5FF, #068ccf);
   background-image: linear-gradient(top, #B0E5FF, #068ccf);
   box-shadow: #fff 0 0px 6px;
   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
#wrap input[type=radio]#button1:checked~label[for=button1] {
          background: #fff;
#wrap input[type=radio]#button2:checked~label[for=button2] {
          background: #fff;
#wrap input[type=radio]#button3:checked~label[for=button3] {
          background: #fff;
#wrap input[type=radio]#button4:checked~label[for=button4] {
          background: #fff;
#wrap input[type=radio]#button5:checked~label[for=button5] {
          background: #fff;
#wrap input[type=radio]#button1:checked~#slideshow ul { left: 0 }
#wrap input[type=radio]#button2:checked~#slideshow ul { left: -100% }
#wrap input[type=radio]#button3:checked~#slideshow ul { left: -200% }
#wrap input[type=radio]#button4:checked~#slideshow ul { left: -300% }
#wrap input[type=radio]#button5:checked~#slideshow ul { left: -400% }
#wrap label[for=button1] { margin-left: -40px }
#wrap label[for=button2] { margin-left: -20px }
#wrap label[for=button3] { margin-left: 0; }
#wrap label[for=button4] { margin-left: 20px }
#wrap label[for=button5] { margin-left: 40px }
label.arrows {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    height: 80px;
    display: none;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 3px;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
label.arrows:hover {
          opacity: 1;
          background: #666;
input[type=radio]#button1:checked~.arrows#arrow-2, input[type=radio]#button2:checked~.arrows#arrow-3, input[type=radio]#button3:checked~.arrows#arrow-4, input[type=radio]#button4:checked~.arrows#arrow-5 {
    right: -65px;
    display: block;
input[type=radio]#button2:checked~.arrows#arrow-1, input[type=radio]#button3:checked~.arrows#arrow-2, input[type=radio]#button4:checked~.arrows#arrow-3, input[type=radio]#button5:checked~.arrows#arrow-4 {
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
input[type=radio]#button2:checked~.arrows#arrow-1 { left: -25px }
input[type=radio]#button3:checked~.arrows#arrow-2 { left: -45px }
input[type=radio]#button4:checked~.arrows#arrow-3 { left: -65px }
input[type=radio]#button5:checked~.arrows#arrow-4 { left: -85px }
</style>
</head>
<body>
<div id="header"><img src="afbeeldingen/header8.jpg" width="630" height="205" alt=""/></div>
<div id="mainnav">
<ul>
    <li><a href="index.html" class="thispage">Home</a></li>
    <li><a href="onzediensten.html">Onze diensten</a></li>
    <li><a href="tarieven.html">Tarieven</a></li>
    <li><a href="offerteaanvraag.html">Offerte aanvragen</a></li>
    <li><a href="overons.html">Over ons</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="page">
<div id="wrap">
        <input type="radio" id="button1" name="buttons" checked="checked"/>
        <label for="button1"></label>
        <input type="radio" id="button2" name="buttons"/>
        <label for="button2"></label>
        <input type="radio" id="button3" name="buttons"/>
        <label for="button3"></label>
        <input type="radio" id="button4" name="buttons"/>
        <label for="button4"></label>
        <input type="radio" id="button5" name="buttons"/>
        <label for="button5"></label>
        <label for="button1" class="arrows" id="arrow-1">
                  <img src="images/arrow.png" />
        </label>
        <label for="button2" class="arrows" id="arrow-2">
                  <img src="images/arrow.png" />
        </label>
        <label for="button3" class="arrows" id="arrow-3">
                  <img src="images/arrow.png" />
        </label>
        <label for="button4" class="arrows" id="arrow-4">
                  <img src="images/arrow.png" />
        </label>
        <label for="button5" class="arrows" id="arrow-5">
                  <img src="images/arrow.png" />
        </label>
        <div id="slideshow">
            <ul>
                <li id="slide1">
                    <img src="images/1.png" />
                </li>
                <li id="slide2">
                    <img src="images/2.png" />
                </li>
                <li id="slide3">
                    <img src="images/3.png" />
                </li>
                <li id="slide4">
                    <img src="images/4.png" />
                </li>
                <li id="slide5">
                    <img src="images/5.png" />
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

Hi Davidoff,
Glad to know that you managed to solve your problem. It will be helpful for other users if you post your solution here.
Thanks,
Preran

Similar Messages

Jquery image slider adapting to the size of the browser

HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?

thomas-shaw wrote:
HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?
You can only distort the height. Obviously when images get narrower the height goes down in pro. Most of the time, unless you specifically throw a different set of images at mobile, they can look a bit stupid. A lot of responsive websites just hide the main image at smaller mobile sizes.

Php image slider

this is what i tried to do ... but obvious its not at all working...i do know that i have to use jquery and the code given below will not work at all, i want to
display image(1.jpg),2.jpg,3,jpg) one by one after few seconds in fade effect..
and also there is this website http://wowslider.com/
can any one tell me the code of the slider they made for this website and explain step by step.. since i m a slow learner
<div id="imageslide">
<?php
$image=array("1.jpg","2.jpg","3.jpg");
$x=count($image);
for($i=0;$i<$x;$i++){
?>
<img src="image/<?php echo $image[$i]?>" />
<?php } ?>

If you wanted to write your own/know how they work this will get you started:
http://css-plus.com/2013/10/create-your-own-jquery-image-slider/
There are loads of free ones available however so I wouldn't recommend using your own on a real site.
You wouldn't do it with PHP, you need to use Javascript/Jquery/CSS to manipulate the slides. PHP would only be used to grab the images from a Directory/Database.

Style Image Slider to include HTML text: How?

I am trying to insert an image slider onto my page. So far, I have tried a few different sliders with some issues.
Does anyone know
A good Jquery Image Slider that allows for HTML text beside the image on a slide?? (Like MSN Homepage)--No Caption or Overlay. Looking for White background with linkable HTML Text on left (40%) and Picture on Right (60%)-all on one slide. Cycle through four similar slides.
I am assuming the solution is not so much the slider, but has to do with creating a seperate div or rule / class and applying?
Thank you for any help.

I would approach it like this:
<!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>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
.cycle-slideshow {
margin: 25px auto;
border: 1px solid silver;
overflow: hidden; /**float containment**/
width: 80%; /**adjust width of container as required**/
.cycle-slideshow img {
width: 60%;
float: left;
.cycle-slideshow h3 {
float: right;
width: 40%;
font-size: 26px;
color: red
.cycle-slideshow p {
clear: right;
float: right;
width: 40%;
font-size: 16px;
.center {text-align:center}
/* Special Rules for tablets, mobiles */
@media only screen and (max-width: 768px) {
.cycle-slideshow { width: 98% }
.cycle-slideshow img {
width: 100%;
display: block;
float: none;
.cycle-slideshow h3 {
display: block;
float: none;
font-size: 20px;
width: 100%;
.cycle-slideshow p {
display: block;
float: none;
font-size: 14px;
width: 100%;
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a>
Responsive Slideshow with text</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-timeout="2000"
    data-cycle-next="#next"
    data-cycle-prev="#prev"
    data-cycle-slides="> div"
>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>

</div>

<div class="center">
<a href=# id="prev">Prev</a> | <a href=# id="next">Next</a>
</div>
</body>
</html>
Nancy O.

Dreamweaver CS6- jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
<p>
    <img src="Leather web page/DSC_0531_4925.JPG"/>
    <img src="Leather web page/DSC_0035_edited-1.JPG"/>
    <img src="Leather web page/DSC_1593_edited-1.jpg"/>
    <img src="Leather web page/DSC_1595_edited-1.jpg"/>
    <img src="Leather web page/DSC_1821.jpg"/>
    </div>
Any help would be greatly appreciated.

1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    allowWrap:        true,
    autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
    delay:            0,
    easing:           null,
    fx:              'fade',
    hideNonActive:    true,
    loop:             0,
    manualFx:         undefined,
    manualSpeed:      undefined,
    manualTrump:      true,
    maxZ:             100,
    pauseOnHover:     false,
    reverse:          false,
    slideActiveClass: 'cycle-slide-active',
    slideClass:       'cycle-slide',
    slideCss:         { position: 'absolute', top: 0, left: 0 },
    slides:          '> img',
    speed:            500,
    startingSlide:    0,
    sync:             true,
    timeout:          4000,
    updateView:       0
// automatically find and run slideshows
$(document).ready(function() {
    $( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
    width: 1000px;
    margin: auto;

Image slider in header?

Hi Guys
I would like to have an image slider (with each image the same grey gradient background but different foreground) on my website in the banner: www.bmgraphics.be
Which one would be best, and what are the do's and don'ts?
I've seen this template: does anyone know where to get the slider part? http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
I tried the nivo slider but the images kept blocking and it really looked bad
http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
Thanks for your help guys!
Regards
Bob

I used this basic jQuery slider on one of my web sites.
http://basic-slider.com/
Apply background images to #slider CSS code.
Insert transparent PNG images into the #slider div.
To make transparent PNGs, use Photoshop or Fireworks and a transparent workspace -- denoted by the checkerboard pattern. Save for web as PNG-24 with transparency. See screenshot from Photoshop.
Nancy O.

Can't get image slider to work

Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.

I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
background-color: #979797;
color: #fff;
margin: 0em;
padding: 0em;}
.page {
max-width: 640px;
margin: 0px auto 30px auto;}
.panel {
background-color: #fff;
color: #666;
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
overflow: auto;}
button {
border: none;}
/********** LOGO **********/
h1 {
text-align: center;
width: 200px;
height: 20px;
margin: 40px auto 40px auto;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}
h2, h3 {
font-weight: normal;
margin: 0em;}
h2 {
color: #666;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 230%;
line-height: 1em;
padding: 20px 0px 0px 20px;}
h3 {
font-size: 90%;
letter-spacing: 0.2em;}
p {
font-family: 'Quattrocento Sans', sans-serif;
line-height: 1.4em;}
a {
    text-decoration: none;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
/***************** No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
display: block;
border: 3px solid #fff;
text-align: center;
background-color: #fff;
color: #db5391;
padding: 10px;}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}
.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}
.slide:first-child {
    display: block;}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints" />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series" />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea" />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>
    </section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;
    function move(newIndex) {
        var animateLeft, slideLeft;
        advance();
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        buttonArray[currentIndex].removeClass('active');
        buttonArray[newIndex].addClass('active');
        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';
        } else {
            slideLeft = '-100%';
            animateLeft = '100%';
        $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
        $group.animate({ left: animateLeft }, function () {
            $slides.eq(currentIndex).css({ display: 'none' });
            $slides.eq(newIndex).css({ left: 0 });
            $group.css({ left: 0 });
            currentIndex = newIndex;
    function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (currentIndex < $slides.length - 1) {
                move(currentIndex + 1);
            } else {
                move(0);
        }, 4000);
    $.each($slides, function (index) {
        var $button = $('<button type="button" class="slide-btn">•</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        $button.on('click', function () {
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

Can I have a Vivid turning image Slider as my background?

I have tried Hi Slider for making jQuery Slider, but I found it is for Html and some blogs. I want to get a still freeware to make image slider that can be used on my mobile phone as the background. Maybe it is cool!

Hi there,
Just to be clear, are you talking about how the songs appear to you in iTunes, or how they are physically organized on your computer? Those are completely separate.
As they are sorted in the iTunes list. Physically if I can say, they are all organised in folders just as the CD's were. Each folder bears the name of the album, but the songs inside have no titles, just numbers.
The organization of songs within iTunes doesn't care at all where the files are physically located. They could be nicely organized in folders or every song could be in a different place. The only way to see where they're located is to to a "Get Info" on the song.
That's what I am complaining about.
If you want to have iTunes organize your folders for you, you can do File->Library->Consolidate library. This will copy everything into nice tidy folders in the iTunes directory, but it will leave the originals, which you will have to delete yourself.
Then I shall try it once more. An older version of iTunes messed up my folders which were located in the iTunes folder. This time I will make sure that the backup is at hand before trying that action again!
Thanks for your time.
Paul

How to insert Jquery image slideshows & other content into muse websites?

I am aware that there is no easy way to put Jquery into adobe muse at this time.
Will you be able to do this in 1.0?
Can it be done now. If so how?
Thanks for any help on the subject

I have WOWslider jquery image slideshow software which produces an HTLM file for its slider. Taking the code that it produces is it possible to put that into an arbitrary HTML box and edit it to work.
I see some references to it in other software as needing some work to get it to run in much the same way as would appear to be the case here.
The pitch around the software makes it appear a case of simply copy and paste. I see above where you say future versions will make it easier to use JS with Muse, but for the moment is there a workaround or hints how to go about it?

How can I make a image slider using Dreamweaver? Is there any image slider widget I could use?

I was browsing through the web when I saw a website which had a really cool image slider. I don't have any idea of how to develop anything similar, but I was wondering if maybe dreamweaver had any widget that has already been developed by someone else that is open source for everyone else to use. Is there anything any?

Ken is referring to a "roll your own" slider that works great. There are lots of those.
None of those are built in to Dreamweaver. None of those will give you a panel within Dreamweaver with which you can build them.
Project Seven does sell widgets that are Dreamweaver extensions.
Adobe is offering another one for free (and you get additional function if you buy it).
Extend Studio offers Power Slider (with a free trial).
And there is Nivo Slider.
These are extensions that plug in and extend what Dreamweaver can do.

Help needed with spry image slide show

Im new to dw and am currently building a site for my buisness. I installed a spry image slide show and it works fine in live view but when I view it on the web
it was looking for sever .js files. I then checked out the spry forums and noticed that it seems to be a common problem. I tried removing the ui1.7 file from the server and reloading,tried removing from local and remote and reloading, tried to change the line <script.src=spry-ui-1.7 etc. to the adobe site as per gramps advise to another having the same issue. Now when I view on the web the slideshow wheel keeps turning but images donot apear. Im lost and can use some help, enclosed is my code also sight is www.patsiga.net
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>pats iga supermarket</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #AF692A;
</style>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #frontpageslideshow */
#frontpageslideshow {
width: 960px;
margin: 0px 0px 0px 0px;
border: solid 0px #aaaaaa;
background-color: #FFFFFF;
padding-top: 0px;
#frontpageslideshow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
color: #AAAAAA;
#frontpageslideshow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
overflow: hidden;
color: #AAAAAA;
text-transform: none;
#frontpageslideshow .ISSClip {
height: 361px;
margin: 0 0px 0px 0px;
border: solid 0px #ffffff;
background-color: #ffffff;
#frontpageslideshow .ISSControls {
top: 0px;
height: 361px;
#frontpageslideshow .FilmStrip {
height: 0px;
background-color: #CCCCCC;
#frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
width: 10px;
height: 0px;
#frontpageslideshow .FilmStripTrack {
height: 0px;
#frontpageslideshow .FilmStripContainer {
height: 0px;
#frontpageslideshow .FilmStripPanel {
height: 0px;
padding-left: 10px;
margin-right: 0px;
#frontpageslideshow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
#frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #AAAAAA;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #ffffff;
border-color: #000000;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #AAAAAA;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div class="container">
<div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>
<div class="container">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>
      <li><a href="recepies.html" title="recepies">Recepies</a></li>
      <li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>
        <ul>
          <li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>
          <li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>
          <li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>
        </ul>
      </li>
      <li><a href="pats_best.html" title="pats best">Pat's Best</a></li>
      <li><a href="organics.html" title="organics">Organics</a></li>
      <li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>
      <li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>
        <ul>
          <li><a href="meats.html" title="dept_meats">Meats</a></li>
          <li><a href="seafood.html" title="dept_seafood">Seafood</a></li>
          <li><a href="deli.html" title="Dept_deli">Deli</a></li>
          <li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>
          <li><a href="produce.html" title="dept_produce">Produce</a></li>
          <li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>
        </ul>
      </li>
    </ul>
    <p> </p>
    <ul id="frontpageslideshow" title="">
      <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
      <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
      <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
      <li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
      <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #frontpageslideshow
var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
widgetID: "frontpageslideshow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 4500,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
    </script>
<p>Since this is a one-column layout, the .content is not floated. </p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
</div>
<div class="footer">
    <p><a href="about_us.html" title="about_us">About Us</a><a href="#">  </a>   <a href="employment.html" title="employment">Employment</a>   <a href="store_info.html" title="store_info"> Store Info.</a>     <a href="#" title="contact_us">Contact Us</a>    <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a>   <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />
©2011 Pat's IGA     <br />
    </p>
    </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
Example 1: This will not work:
WEBPAGE HERE:    /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/SpryAssets/....your javascript files
Example 2: This will work:
WEB PAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/myfolder/SpryAssets/....your javascript files
Hope this helps.

Image slide show...

Hi,
If I have a Flash web page with a button and I'd like an
image slide show to launch at the top of the page upon one clicking
the button, plus the slide show container to have the play/pause,
forward, backward controls, along with small numbers 1-10
(appropriate number highlighted for which photo you are viewing)
also...how much time would it be to set up the controls,
actionScript / interactivity? (a guesstimate)
If I'm creating and prepping all images, buttons, etc -- just
need someone to actionScript and set up the controls, how much
would you estimate this would cost and, as above, timeframe in
hours?
Thank you! Just trying to get an idea.

I'm sure I remember a few years ago now a heated discussion
on whether it counts as price fixing to discuss fees in an online
forum.
It really depends on who was doing it. As a guesstimate I'd
say 4-5 hours from scratch which would cover setting it up and
probably one revision. If you were happy to use a component that
was designed for it then a fraction of that time, probably under an
hour. You'll pay more for someone with experience, but then they're
probably faster and the standard of the work will be higher.
In my opinion it's worth paying a little more for a quality
company who may foresee problems you overlook rather than pinching
the pennies, but that's your call.
If you're looking to do it on the cheap then buy a component
and have their technical support set it up (or at least help you)
for free.

Simple way to use the Photo Gallery Module and flexslider to create an editable image slider?

I want to offer an image slider that my clients can easily update themselves through the Admin. Ive researched it alot and I know it can be done using web apps but does my cliently seriously need to pay over $400 a year for the webcommerce option just to have an updatable image slider?? I find that unrealistic. Does anyone know how to set this up using the photo gallery module and "flexslider" so clients on the business marketing plan can have access to a simple and clean editable image slider?
Any BC experts that can help would be greatly appreicated!
Thankyou

Not an expert, but I think what you're looking for is a slider that can get its list of photos from an XML file. The Photo Gallery module can produce an XML file.

Full Width Image/Slider

Hi everyone,
I'm having some problems using the full width option in relation to height.
I want my image to adjust to both height and width as per the top image/slider following Adobe Muse Site of the day website - Home
At present the width of my image adjusts perfectly on different browsers, but the height just cuts out part of the image rather than increasing it's size. The images I am using are more than adequate in size to adjust to even the largest of resolutions.
Since the above Adobe Muse created site manages to achieve responsive height and width I was wondering how this is achievable?
Thank you

Can someone tell me how one would go about getting some customer support from Adobe?

Image Slider not appearing/visual in live view/Browser

I updated a link to my image browser and once I hit refresh, everything seemed fine. I checked my rework on live view, and the whole slider (including images and buttons) were no longer visual. (You could not see them.)
|

<div class="header">
      <div>
        <div class="nav">
            <nav>
                <ul class="menu">
                    <li class="current li-none"><a href="index.html">     Home     </a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">     Media      </a></li>
                    <li class="li-left li-none"><a href="products.html">     Products     </a></li>
                    <li><a href="news.html">News</a></li>
                    <li><a href="contacts.html">     Contact     </a></li>
                </ul>
            </nav>
      </div>
        <header>
            <h1><a href="index.html"><img src="images/logo234.png" alt=""></a></h1>
        </header>
        <div id="slide">
            <div class="slider">
                <ul class="items">
                    <li><img src="images/slide-1.jpg" alt="" /></li>
                    <li><img src="images/slide-2.jpg" alt="" /></li>
                    <li><img src="images/slide-3.jpg" alt="" /></li>
                </ul>
            </div>
            <ul class="pags">
                <li><a href="#"><strong></strong></a></li>                
|
I checked in browser and you could also not see them there, either. The ONLY thing I changed was the link to the image. Here is the code, please let me know if you can help out at all.
Joe

Jon,
I have not uploaded the page yet, because this issue came up and I did not want a non-functional part of the site available online yet. However, I have done the following:
-Checked the link and that it is correct with no typo's, etc.
-Checked the Javascript (there are no issues there, either.)
I am going to download the original page from the server and compare once again to see if there are differences.
I will post updates.

JQuery image slider

Similar Messages

Maybe you are looking for