Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Slider effect op eerste plaatje werkt niet (Opgelost)

GroundZero - 04/01/2016 10:06 (laatste wijziging 04/01/2016 10:09)

Lid

Hi,

ben momenteel bezig met het leren van jQuery en wou een eigen slider maker. Nu werk de slider prima so far, en de effecten ook, alleen het eerste plaatje heeft geen effect.

Iemand die mij kan vertellen hoe ik dit kan realiseren? van alles geprobeerd maar niks werkt.

Onderaan zie je dat ik op het eerste plaatje een class "transition" toeken, dit werkt prima maar toch is het plaatje niet geanimeerd.

Hij heeft dus direct het eindresultaat en slaat de overgang van de animatie over.

Mijn code hier:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!doctype html>
<html lang="nl">
<head>

<meta charset="utf-8">

<title>Beta Slider</title>

<style type="text/css">
body {
	background:#dedede;
}

.description {
	width:611px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-220px;
	margin-left:-330px;
	padding:12px;	
	border:12px solid #fff;
	background:#D5D5D5;
	font-family:Verdana;
	font-size:12px;
}

.container {
	width:660px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-330px;
	margin-top:-116px;
	padding:12px;
	box-sizing:border-box;
	border:1px solid #dedede;
	background:#fff;
}

.slide-viewer {
	position:relative;
	overflow:hidden;
	height:312px;
}

.slide-viewer .slide-group {
	width:100%;
	height:100%;
	position:relative;
}

.slide-viewer .slide-group .slide {
	width:100%;
	height:100%;
	position:absolute;
	display:none;
}

.slide-viewer .slide-group .slide:first-child {
	display:block;
}

.slide-buttons {
	position:absolute;
	width:100%;
	bottom:10px;
	text-align: center;
}

.slide-btn {
	border: none;
	background: none;
	color: #fff;
	font-size: 200%;
	line-height: 0.5em;
}

.slide-btn.active, .slide-btn:hover {
	color: #F86C24;
	cursor: pointer;
}

.slide-viewer .slide-group .slide .textarea {
	position:absolute;
	top:30px;
	left:30px;
	width:100%;
}

.slide-viewer .slide-group .slide .textarea p {
	font-size:24px;
	color:#FFFFFF;
	margin:11px 0px 11px 0px;
}

.slide-viewer .slide-group .slide .textarea p .black {
	background-image:url('bg.png');
	background-repeat:repeat;
	padding:5px;
}

.slide-viewer .slide-group .slide img {
	-webkit-transition:8s all ease-in-out;
	-moz-transition:8s all ease-in-out;
	transition:8s all ease-in-out;
}

.transition {
    -webkit-transform: scale(1.1) rotate(2deg); 
    -moz-transform: scale(1.1) rotate(2deg);
    -o-transform: scale(1.1) rotate(2deg);
    transform: scale(1.1) rotate(2deg);
}

.black a:link, .black a:visited {
	color:#72C02C;
	text-decoration:none;
	border-bottom:1px solid #72C02C;
}

.green {
	color:#72C02C;
	font-weight:normal;
}
</style>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

</head>
<body>



<div class="container slider">
    <div class="slide-viewer">
        <div class="slide-group">
        	<div class="slide slide-1">
            	<img src="slider1.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-2">
            	<img src="slider2.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-3">
            	<img src="slider3.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-4">
            	<img src="slider4.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
                    
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="slide-buttons">
    
    </div>
</div>

<script language="javascript">
$('.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;
		var animateRight;
		
		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(newIndex).find('img').removeClass('transition');
			$slides.eq(currentIndex).find('img').removeClass('transition');
			
			$slides.eq(currentIndex).css({ display: 'none' });
			$slides.eq(newIndex).css({ left: 0 });
			
			$slides.eq(newIndex).find('img').addClass('transition');
			
			$group.css({ left: 0 });
			currentIndex = newIndex;
		});		
	}
	
	function advance() {		
		clearTimeout(timeout);
		
		timeout = setTimeout(function(){
			if(currentIndex < ($slides.length - 1)) {
				move(currentIndex + 1);
			} else {
				move(0);
			}
		}, 8000);
	}
	
	$.each($slides, function(index) {
		var $button = $('<button type="button" class="slide-btn">&bull;</button>');
		
		if(index === currentIndex) {
			$button.addClass('active');
		}
		
		$button.on('click', function(){
			move(index)
		}).appendTo('.slide-buttons');
		
		buttonArray.push($button);
	});
	
	advance();
	
	$this.find('img:first').addClass('transition');
});
</script>

</body>
</html>

<!doctype html>
<html lang="nl">
<head>
 
<meta charset="utf-8">
 
<title>Beta Slider</title>
 
<style type="text/css">
body {
	background:#dedede;
}
 
.description {
	width:611px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-220px;
	margin-left:-330px;
	padding:12px;	
	border:12px solid #fff;
	background:#D5D5D5;
	font-family:Verdana;
	font-size:12px;
}
 
.container {
	width:660px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-330px;
	margin-top:-116px;
	padding:12px;
	box-sizing:border-box;
	border:1px solid #dedede;
	background:#fff;
}
 
.slide-viewer {
	position:relative;
	overflow:hidden;
	height:312px;
}
 
.slide-viewer .slide-group {
	width:100%;
	height:100%;
	position:relative;
}
 
.slide-viewer .slide-group .slide {
	width:100%;
	height:100%;
	position:absolute;
	display:none;
}
 
.slide-viewer .slide-group .slide:first-child {
	display:block;
}
 
.slide-buttons {
	position:absolute;
	width:100%;
	bottom:10px;
	text-align: center;
}
 
.slide-btn {
	border: none;
	background: none;
	color: #fff;
	font-size: 200%;
	line-height: 0.5em;
}
 
.slide-btn.active, .slide-btn:hover {
	color: #F86C24;
	cursor: pointer;
}
 
.slide-viewer .slide-group .slide .textarea {
	position:absolute;
	top:30px;
	left:30px;
	width:100%;
}
 
.slide-viewer .slide-group .slide .textarea p {
	font-size:24px;
	color:#FFFFFF;
	margin:11px 0px 11px 0px;
}
 
.slide-viewer .slide-group .slide .textarea p .black {
	background-image:url('bg.png');
	background-repeat:repeat;
	padding:5px;
}
 
.slide-viewer .slide-group .slide img {
	-webkit-transition:8s all ease-in-out;
	-moz-transition:8s all ease-in-out;
	transition:8s all ease-in-out;
}
 
.transition {
    -webkit-transform: scale(1.1) rotate(2deg); 
    -moz-transform: scale(1.1) rotate(2deg);
    -o-transform: scale(1.1) rotate(2deg);
    transform: scale(1.1) rotate(2deg);
}
 
.black a:link, .black a:visited {
	color:#72C02C;
	text-decoration:none;
	border-bottom:1px solid #72C02C;
}
 
.green {
	color:#72C02C;
	font-weight:normal;
}
</style>
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 
</head>
<body>
 
 
 
<div class="container slider">
    <div class="slide-viewer">
        <div class="slide-group">
        	<div class="slide slide-1">
            	<img src="slider1.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-2">
            	<img src="slider2.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-3">
            	<img src="slider3.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="slide slide-4">
            	<img src="slider4.jpg" alt="" />
                <div class="textarea">
                	<p>
                    	<span class="black">
                        	<span class="normal"><a href="#" title="">Lorem ipsum</a> dolor sit amet</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal"><strong class="green">consectetuer</strong> adipiscing elit</span>
                        </span>
                    </p>
 
                    <p>
                    	<span class="black">
                        	<span class="normal">Typi non habent <strong class="green">claritatem</strong> insitam</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="slide-buttons">
 
    </div>
</div>
 
<script language="javascript">
$('.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;
		var animateRight;
 
		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(newIndex).find('img').removeClass('transition');
			$slides.eq(currentIndex).find('img').removeClass('transition');
 
			$slides.eq(currentIndex).css({ display: 'none' });
			$slides.eq(newIndex).css({ left: 0 });
 
			$slides.eq(newIndex).find('img').addClass('transition');
 
			$group.css({ left: 0 });
			currentIndex = newIndex;
		});		
	}
 
	function advance() {		
		clearTimeout(timeout);
 
		timeout = setTimeout(function(){
			if(currentIndex < ($slides.length - 1)) {
				move(currentIndex + 1);
			} else {
				move(0);
			}
		}, 8000);
	}
 
	$.each($slides, function(index) {
		var $button = $('<button type="button" class="slide-btn">&bull;</button>');
 
		if(index === currentIndex) {
			$button.addClass('active');
		}
 
		$button.on('click', function(){
			move(index)
		}).appendTo('.slide-buttons');
 
		buttonArray.push($button);
	});
 
	advance();
 
	$this.find('img:first').addClass('transition');
});
</script>
 
</body>
</html>

6 antwoorden

Gesponsorde links

Jointjeff - 04/01/2016 11:52
HTML interesse		Als je dat zoom-effect bedoelt, in deze fiddle werkt het: https://jsfiddle.net/r2auae8e/
Bedankt door: GroundZero

GroundZero - 04/01/2016 13:12
Lid		ja perfect dat is precies wat ik bedoelde, zal eens kijken wat je precies hebt gedaan, hartstikke bedankt! En dat fiddle is wel super handig, moet ik voortaan ook maar is gaan gebruiken in plaats van de code hier te copy pasten hahaha Nogmaals dank!

Thomas - 04/01/2016 15:02
Moderator		Mja, maar wat is het verschil tussen de fiddle en bovenstaande code, met andere woorden, waarom werkt die wel? Een ander nadeel van het extern plaatsen van oplossingen is dat deze op den duur mogelijk niet meer beschikbaar zijn. Daarbij: - $this wordt maar 1x gebruikt dus heeft nagenoeg geen meerwaarde - moet het niet <script type="text/javascript"> (of zelfs simpelweg <script>) zijn in plaats van <script language="javascript">? - waar is je $().ready(function() { ... }); block? - je zoekt .slide-group en .slide door heel je document; de slider vormt een redelijk afgebakende eenheid met voorgeschreven gedrag, waarom voeg je geen id toe aan de container waar je aan refereert? op die manier zou je meerdere (verschillende) sliders op één pagina kunnen gebruiken (als je dat zou willen); daarbij zou je je slider code zo op kunnen zetten dat je deze kunt instantiëren als object Met de fiddle is mogelijk je probleem opgelost maar het is dus volstrekt onduidelijk waarom deze dan wel werkt. Ook helpt dit anderen die naar een oplossing voor een soortgelijk probleem zoeken niet... Daarnaast is er nog wel het e.e.a. te verbeteren als ik bovenstaande / fiddle code bekijk.

Jointjeff - 04/01/2016 15:23 (laatste wijziging 04/01/2016 15:25)
HTML interesse		@Thomas: goede punten, mee eens. Ik heb enkel de code op jsfiddle gezet om 'snel' te debuggen, maar het probleem bleek aldaar niet aan de orde. Is voor de lange termijn (mocht jsfiddle ooit stoppen) inderdaad niet handig. Ik heb verder niet de tijd genomen naar de kwaliteit van de code te kijken. @GroundZero: Het verschil met de fiddle is de plaats waar je jQuery oproept. Dit kun je beste doen net voor het sluiten van de body (</body>). https://develop...#js_bottom

Thomas - 04/01/2016 17:43
Moderator		Citaat: Het verschil met de fiddle is de plaats waar je jQuery oproept. Dit kun je beste doen net voor het sluiten van de body (</body>). En daar is precies dat .ready() block voor. Dit zorgt ervoor dat de jQuery-JavaScript pas uitgevoerd wordt op het moment dat je hele document is geladen . Daarbij is het nog steeds handig/netjes om inline JavaScript uit te voeren net voor je </body> tag, buiten enige andere tag. Om deze JavaScript op de goede plek te krijgen zou je output buffering in PHP kunnen gebruiken. Je moet dan wel een middel hebben om deze snippets op te sparen in de code die je uitvoert, om deze daarna te voeren aan een routine in je "maintemplate functionaliteit" (bijvoorbeeld een methode die je footer uitprint).
Bedankt door: Jointjeff

GroundZero - 05/01/2016 10:08 (laatste wijziging 05/01/2016 11:23)
Lid		Haha, ik had de oplossing wel willen posten hoor alleen een beetje druk en dus traag Dus de oplossing was puur wanneer jQuery geladen werd. Zoals ik al zij, ik ben het aan het leren. Had een boek gekocht, maar schijnbaar is de kwaliteit dus ook niet 100% haha want de code heb ik 1:1 overgeschreven uit het boek Wanneer ik de oplossing had, wilde ik het inderdaad wat verbeteren en enkele van je suggesties mee nemen ;) Ook dat alles op één plek stond was gewoon puur omdat ik aan het leren ben haha, normaal gesproken is het ook net voor de sluitende body tag Dank voor jullie reacties!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten