The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> javascript slide show, struggling for several days now..
khobo
post Aug 14 2017, 09:27 AM
Post #1





Group: Members
Posts: 1
Joined: 14-August 17
Member No.: 26,476



i'm using a javascript slide show and i want text to display underneath.. however the div box is collapsing and making the text underneath go up under the images.. how can i fix this? i've tried float clearing.. defining a specific height but that loses it's responsiveness. also i can't seem to center the slide show either.. it doesn't see how big the image is and puts the leading edge of the image in the center instead of the middle. is this too confusing?

ultimately.. i want a slide show that i can center in the page.. that's responsive and that holds its height so i can put text underneath it


java script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein');}, 3250);});

$(function(){ $('.fadein-bottom img:gt(0)').hide(); setInterval(function(){ $('.fadein-bottom :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein-bottom');}, 3250);});
</script>

css:

.fadein { position:relative; max-width:100%;}
.fadein img {position:absolute; max-width:100%; margin-right:auto; margin-left:auto;}

html:
<div class="fadein">
<img src="zimgs-books/archive/prostatitis/01.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/02.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/03.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/04.jpg" style="max-width:100%;>
</div>

This post has been edited by khobo: Aug 14 2017, 09:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 14 2017, 02:21 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(khobo @ Aug 14 2017, 04:27 PM) *

i'm using a javascript slide show and i want text to display underneath.. however the div box is collapsing and making the text underneath go up under the images.. how can i fix this?

That might be because the images are "position: absolute", which prevents them from affecting the page flow.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 14 2017, 10:40 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(khobo @ Aug 14 2017, 04:27 PM) *

is this too confusing?


Yes. smile.gif

Not really confusing, but a little thin. We can be of more help if you show us the whole thing. Can you link to a sample page? With the troublesome text in it.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:34 AM