Good day Everyone,
Can you please help me out. I have a slideshow of images (3 images) with the first one displaying when the page is loaded.
I also have next and previous buttons that work 100%. But I just want to make the slideshow move automatically to the next image after a number of seconds (5 sec) and loop (return to the first image and continue cycling through each image automatically).
I apologize for the seemingly obscure class names as they have been heavily implemented into the template that I am working with. Therefore, changing them would create a list of CSS issues as well.
My HTML
<!-- START SLIDESHOW HOME -->
<section id="slideshow-home" class="wrap noo-slideshow slideshow-home">
<div class="property-slider">
<div id="noo-slider-1" class="noo-slider noo-property-slide-wrap">
<ul class="sliders">
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide1.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Santa Monica, CA</h3>
</div>
</li>
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide2.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Pacific Palisades, CA</h3>
</div>
</li>
<li class="slide-item noo-property-slide">
<img src="images/slideshow/bg-slide3.jpg" class="attachment-property-slider" alt="" />
<div class="slide-caption">
<div class="slide-caption-info">
<h3>Visalia, NJ 93277</h3>
</div>
</li>
</ul>
<div class="clearfix"></div>
<div id="noo-slider-1-pagination" class="slider-indicators indicators-center-bottom"></div>
<a id="noo-slider-1-prev" class="slider-control prev-btn" role="button" href="#">
<span class="slider-icon-prev"></span>
</a>
<a id="noo-slider-1-next" class="slider-control next-btn" role="button" href="#">
<span class="slider-icon-next"></span>
</a>
</div>
</div>
</section>
<!-- END SLIDESHOW HOME -->
setInterval(function(){
nextSlide(); // <-- your slide change code
}, 5000) // <-- run this every 5 seconds
But, as others have suggested you are probably much better off just using one of the thousands of slide show plugins for jQuery
You can use setInterval() function for this.This will run for every interval of specified time.
setInterval(function(){
// do what you want
// or you can use: $('#noo-slider-1-next').click();
},time_interval_in_milliseconds);
Related
Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.
I'm having a problem creating and fixing carousel animations. Most carousels are only in 1 per screen while I need 4 per screen so I'm trying to implement my own carousel.
Current html:
<div class="display-flex m-t-2">
<div [ngClass]="{ 'disabled-button': page === 1, 'cursor-pointer': page > 1}" (click)="prev()">
<i class="material-icons">keyboard_arrow_left</i>
</div>
<div class="display-flex-child width-100">
<div class="m-x-2" *ngFor="let prod of productList">
<div class="display-flex flex-direction">
<div class="text-title">{{prod.title}}</div>
<div>
<img [src]="prod.url" alt="{{prod.title}}" height="200" width="200">
</div>
</div>
</div>
</div>
<div [ngClass]="{ 'justify-content-right disabled-button': !hasNextValues,
'justify-content-right cursor-pointer': hasNextValues}" (click)="next()">
<i class="material-icons">keyboard_arrow_right</i>
</div>
</div>
Image here:
Html code result image
Expected: to be like a carousel that has a delay when clicking next and previous button
Actual: instantly goes to next or previous
I just want to move the .step1 div so it won't be right next to the #step4m div that way no matter where it is on the page, the code should work the same since it will identify the specific div instead of using .next()
The HTML:
<div class="step1 marker_show">
<a id="q1_one" class="step_button s1 run_loading" href="">option 1</a>
<a id="q1_two" class="step_button s1 run_loading" href="">option 2</a>
</div><!-- STEP 1 END -->
<div id="step4m" class="step4 marker_show">
<div id="stepend" class="show_end">
<div id="proceed">
<div id="if_one">
<a id="agree1" class="step_button" href="http://link1.com">Continue</a>
</div>
<div id="if_two">
<a id="agree2" class="step_button" href="http://link2.com">Continue</a>
</div>
</div>
</div>
</div><!-- STEP 4 END -->
The Javascript:
$(document).on('click', '.run_loading', function (e) {
e.preventDefault();
$(this).parent().hide().next().fadeIn();
$('.step4 .loading').show();
run_loading_run_1('2500');
run_loading_run_4('2500',q1);
});
UPDATE: JSFiddle
How do I do this?
You want
.nextAll('#step4m:first')
However, since IDs must be unique, you could also just write $('#step4m').
Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet
I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?