PDA

View Full Version : The best way to create images that disappear and are replaced?


colaroid
04-09-2010, 11:55 AM
I am new to website design but I need to make the website look professional so I would like to know the best (and easiest) way to make an image disappear then be replaced with another image in a continuous loop. It doesn't need to be linked etc it would just be an aesthetic feature. Do I need flash or java or something else?:confused:

gentleone
04-09-2010, 12:30 PM
You need something like Jquery. This one is very basic, lightweight and simple to implement if you follow the instructions.

http://jonraasch.com/blog/a-simple-jquery-slideshow

colaroid
04-09-2010, 02:57 PM
Thanks this looks good.:)

zebulonzed
04-09-2010, 04:37 PM
There's a nice and simple "slideshow" script here that lets one image slide in over the other, can have as many as you want and optionally link any of the images if needed. Also doesn't muck with your Dreamweaver design view if you use that at all.

http://www.dynamicdrive.com/dynamicindex14/presentationslide.htm

domedia
04-09-2010, 06:20 PM
I've started using the Nivo slider that was posted here by someone earlier this month.
http://nivo.dev7studios.com/

zebulonzed
04-10-2010, 07:29 PM
Domedia

The background of the page at http://nivo.dev7studios.com/ is gorgeous, do you know how that is achieved? Is it a CSS generated gradient?? I was looking at the source code and went blind trying to find it out. (that is a super image switcher, thanks for the post, btw).

gentleone
04-10-2010, 07:57 PM
The background of the page at http://nivo.dev7studios.com/ is gorgeous, do you know how that is achieved? Is it a CSS generated gradient?? I was looking at the source code and went blind trying to find it out. (that is a super image switcher, thanks for the post, btw).

It's an image ;)
http://nivo.dev7studios.com/images/header.png

colaroid
05-07-2010, 09:30 AM
There's a nice and simple "slideshow" script here that lets one image slide in over the other, can have as many as you want and optionally link any of the images if needed. Also doesn't muck with your Dreamweaver design view if you use that at all.

http://www.dynamicdrive.com/dynamicindex14/presentationslide.htm

I tried this and can't get it to work:( I will try the next option

colaroid
05-07-2010, 10:25 AM
Right I have tried all of these and can't get them to work. I am attempting the Nivo Slider now. Have I got things in the right place? This is on my style sheet:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>


<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>


and this is in the source code for my page:
<div id="slider">
<img src="images/2stern.png" alt="" />
<img src="images/fingx.png" alt="" />
<img src="images/home2.png" alt="" />
</div>

I can see the images I have put in in the dreamweaver design window so I guess its a problem at the style sheet end.

domedia
05-07-2010, 02:53 PM
Make sure all your files are where you said they are.

colaroid
05-12-2010, 08:44 AM
Make sure all your files are where you said they are.


I can see the images on the site they are just not changing so I think the image files are in the right place?

colaroid
05-12-2010, 09:50 AM
I can see the images on the site they are just not changing so I think the image files are in the right place?

I shouldn't have put anything on the style sheet. I overcomplicated it.

Also in case anyone else has this problem, when I use the slideshow the image filenames are case sensitive. That confused me for a few minutes

gentleone
05-12-2010, 10:06 AM
This is on my style sheet:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>


<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>

To clear a misunderstanding out of the way. You say you have the above files and code in your stylesheet????
Or do you mean in between the <head> tags, because thats where it should be?

colaroid
05-12-2010, 10:09 AM
To clear a misunderstanding out of the way. You say you have the above files and code in your stylesheet????
Or do you mean in between the <head> tags, because thats where it should be?

I had it in my stylesheet but I have now moved it into the code for my page, it is working although the aesthetics aren't good.

gentleone
05-12-2010, 10:46 AM
do you have the page live somewhere?

colaroid
05-12-2010, 01:28 PM
http://surfaceanalysis.group.shef.ac.uk/index4.html

Its here, I have not yet looked at the rest of the help on the nivo website so I think I can make it look better however I would like to know how to move the text up so that it is to the left of the div containing the slideshow.

I have moved the slideshow to the right by altering the margins in the style sheet but I think this is wrong. Do I need to put the text in another div and align that to the left? or can I use absolute positions in the style sheet and the text will wrap around it?

gentleone
05-13-2010, 01:34 PM
First all put the following in your head instead of your mainContent div. So in between these tags:
<head>code here</head


<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
You might aswell add the following to your nivo-slider.css.

#slider {
position:relative;
//The image below is in the "style-pack" that come with the download
background:url(images/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}


I would like to know how to move the text up so that it is to the left of the div containing the slideshow.

The easiest way would be to divide your mainContent div into 2 colums, but I'm not sure how to do that wit a .dwt file.

colaroid
05-17-2010, 11:22 AM
First all put the following in your head instead of your mainContent div. So in between these tags:
<head>code here</head


<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
You might aswell add the following to your nivo-slider.css.

#slider {
position:relative;
//The image below is in the "style-pack" that come with the download
background:url(images/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}


The easiest way would be to divide your mainContent div into 2 colums, but I'm not sure how to do that wit a .dwt file.

Out of interest why is it best to put the above between the header tags? I will try "div"ing. I thought that might be best but didn't want to spend ages trying to find out there was a much simpler soloution. Although this is probably simple enough for most people:)

colaroid
06-03-2010, 09:31 AM
I have made the text div the right size and have put it on the left of my page. How do I move the slider div next to it?

Here is the page:
http://surfaceanalysis.group.shef.ac.uk/index4.html

Do I need to use absolute positioning?

urbanrays
06-03-2010, 12:45 PM
I would be looking at these personally

.oneColFixCtrHdr #container #slider {
width: 300px;
margin-right: 50px; /*Check these figures*/
margin-left: 550px; /*Check these figures*/
}

.lefttext {
width: 550px;
margin-left: 0px;
}
.oneColFixCtrHdr #container #lefttext {
width: 525px;
margin-left: 0px;
}

Your container is only 900px, If my maths is right you need a container 1450px for this all to line up

colaroid
06-03-2010, 12:52 PM
I meant to write this:

.oneColFixCtrHdr #container #slider {
width: 300px;
margin-right: 50px; /*Check these figures*/
margin-left: 550px; /*Check these figures*/
}


.oneColFixCtrHdr #container #lefttext {
width: 525px;
margin-left: 0px;
}

I thought the margin went from the left hand side of the whole page, is it actually from the previous box?

I have managed to sort it now using a floating box but the more I learn the better.

urbanrays
06-03-2010, 01:50 PM
The margin is an invisable box around your div so in your case #slider is 900px in width, this is why it isnt sitting next to .lefttext.

Im not a fan of using the compound option the way you have used it, each to his own I suppose, I only use compound like this

#slider
#slider h1
#slider p
#slider img
etc etc

Instead of:-

.oneColFixCtrHdr #container #slider {
width: 300px;
margin-right: 50px;
margin-left: 550px;
}

#slider {
position:relative;
//See the "style-pack" below for image
background:url(images/loading.gif) no-repeat 50% 50%;
}

why dont you just have

#slider {
width: 300px;
margin-left: 50px; /*thats if you want a 50px gap between .lefttext and #slider*/
background:url(images/loading.gif) no-repeat 50% 50%;
float: left;
}

Makes for much cleaner code IMO

colaroid
06-03-2010, 01:53 PM
I'm learning as I go, so it will just be ineptitude. But thanks, I understand a bit more now.

urbanrays
06-03-2010, 02:17 PM
No worries

Look at your h1 tags too, all you have used is h1 tags on all your headings

One h1 per page use h2,3,4,5,6