Hello,

Im working on my portfolio re-design at the moment and im looking for a specific way to show my projects in a slideshow, just like this http://www.markdearman.com/

Ive used a very similar slideshow before which almost matches the above called anything slider found here http://css-tricks.com/examples/AnythingSlider/ the only difference is anything slider sort of flys in and out where the site above only fades out the image. This is important since ill be having individual slides for each project, so i need the image in the slide to change with some sort of effect whilst keeping the text in place (without the text moving). Maybe theres a way to manipulate anything slider to do what i need ?

http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Thanks for the reply Tyler but isnt EasySlider just the same as AnythingSlider ?

Im using AnythingSlider at the moment on the frontpage of my re-design here http://gfxpixeldesigns.com/gfxpixeldesignsnewdesign09/index.html but for the portfolio section id like only the image to slide in and out, and the text just stay stationary since it would be the same for all slides.

if you can hold on for a few days, I was just about to write something similar for my own site.

Alternatively use the jquery cycle plugin like they have on that site.

Thanks Mark, i can hold on for a few days. Infact its probably going to be weekend when i find time to finish this so ill wait and see what you come up with. Ive looked at the jQuery cycle plugin but i really dont understand javascript too well, if i find time i may just have a play with anything slider. Thinking about it i guess all i need to do really is float my text and absolute position the forward arrow.

I've just put this together, quicker than i thought.

<script type="text/javascript">
$(document).ready(function(){
$('#gallery img').hide();
$('#gallery img:hidden:first').fadeIn(2000);
var index = 0;
var n = $('#gallery img').length - 1;
$('#next').click(function(){
$('#gallery img').eq(index).fadeOut(2000);
if (index < n){
$('#gallery img').eq(index+1).fadeIn(2000);
}else{
$('#gallery img:hidden:first').fadeIn(2000);
}
if(index < n){
index = index+1;
}else{
index = 0;
}
});
$('#previous').click(function(){
$('#gallery img').eq(index).fadeOut(2000);
if (index > 0){
$('#gallery img').eq(index-1).fadeIn(2000);
}else{
$('#gallery img:hidden:last').fadeIn(2000);
}
if(index > 0){
index = index-1;
}else{
index = n;
}
});
});
</script>

all you need is a div with the id gallery, something with id next and something with id previous.

 

use this in your css

#gallery{
width: XXpx;
height: XXpx;
position: relative;
}
#gallery img{
position: absolute;
top: 0;
left: 0;
}

place your text where you want.

I hope this makes sense.

Wow thanks Mark that was quick !

Only it doesnt make sense to the likes of me, im a numskull when it comes to javascript. Sorry .

 

So i add the script above to my head section along with the jQuery library. Ive then got my html:

<div id="gallery">
<span id="previous"></span>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<p id="text">My text that doesnt change</p>
<span id="next"></span>
</div>

Would that be correct ? Ive added the unordered list for the images since i wasnt exactly sure where to place them, im guessing the script would hide/show these on request ?

 

Will try and find time to try this tomorrow, just wanted to check ive got the right idea. And thanks, im sure this will help alot of designers out .

almost there.

 

<span id="previous"></span>
<div id="gallery">
<img src="" />
<img src="" />
<img src="" />
</div>
<p id="text">My text that doesnt change</p>
<span id="next"></span>

 

as the images are absolute positioned they will sit on top of each other.

you can then position everything else with your css.

havent had much time to try this properly but i just gave it a quick try got the slideshow to work but for some reason the previous and next buttons wouldnt work. I did however get anything slider working exactly how i wanted so i think ill just go with that, just gotta find the time to finish it now.

Thanks for the help Mark