Hey i am working on a css slider it is working fine without js only with css but i want to make a js script for navigation buttons for slider i mean i want to make a js script that can slide the content left or right by clicking on left or right button and it has to make a loop i mean if you click button once then it has to slide content left or right by 100% each time and max width is 1000% of the content which i want to slide can anyone please help me for this
<div class="slider-10">
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
</div>
And i want to slide this section:
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
Please help me
You can set any img in a div element means 1 div for every imgtag then declare a function in js and call it with onclick event for EX: click right button sends 1 to function and left one -1.
then yo can add class for every div that should show.
Related
i am using #id on 3 buttons to change image on Slides , but i dont want to scroll to images slide section when i click on button just want to slide image to next without scrolling to image section
here is drive video link to show how my web is looking right now https://drive.google.com/file/d/1dXMCeBNzkn2c5ChNQfOAVthNBHHsePSp/view?usp=drivesdk
<div className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24 ">
<div id="item1" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
</div>
<div id="item2" className="carousel-item " >
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
</div>
<div id="item3" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
</div>
</div>
Just add an event listener to your buttons and prevent the default behaviour. Add an id of "link" to the button and then add an event listener like below. If your button element contains an anchor tag, add the "link" id to anchor tag instead of button.
document.getElementById("link").addEventListener("click", (e) => {
e.preventDefault();
});
When the user clicks on the image I want to replace the 'input type:image' with a 'iframe' in the same position and the same height. iv tried adding the iframe and setting the display to invisible then visible when clicked but this causes alignment issues
also tried setting display of iframe to none, which looks good at the start but then how do i get it to appear where the map previously was?
<script>
function showIframeMapOnClick() {
alert("this is a test");
$("#Image1").css('visibility', 'hidden');
$("#iFrameMap").css('visibility', 'visible');
/// $("#iFrameMap").css('visibility', 'block');
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div>
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" style="float:right; position:relative; width:550px" />
<iframe id="iFrameMap" src='https:' width='50%' height='400px' style="float:right; position:relative; width:550px; visibility:hidden"/*also tried display:none*/></iframe>
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</div>
anyone know how to resolve this?
thanks
Give id to your div,(here its myDiv), and define height & width for it. Inside that use your image.
When user clicks button, change the content of div, thus the iframe will be shown in same position. Code shown below
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
function showIframeMapOnClick() {
$("#myDiv").html("<iframe id='iFrameMap' src='https:' width='50%' height='400px' style=''></iframe>");
}
</script>
<div id="Contact Us" class="backimage2" style="width:100%;">
<div id="Fullcontent">
<div id="thirdPageDiv" class="wrapper whitediv">
<div id="myDiv" style="float:right; position:relative; width:550px">
<input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" />
</div>
<div class="black-header">Contact Us</div><br />
This House,<br />
This Street,<br />
This Door,<br />
This LetterB,<br />
Please,<br />
Come Again,<br />
<br />
</div>
</div>
</div>
This is a case in which the background is scrolling and contains image thumbnails upon clicking it should animate the actual pic.
I am done with everything ,when i click on the thumbnail ,the image pops up,but i want the background to be silent (no scrolling is required).It is still scrolling ,how to stop that
here is my custom.js ,what should i add to achieve that
jQuery(document).ready(function() {
$('.space-image').click(function() {
var image_sel_id = $(this).attr('id');
/*$('.transparent').show();
/*$('.gallery-wrapper').hide(1000);*/
$('#fullimage'+image_sel_id).show().animate({left:'5%',width:'90%'},"slow");
$('#scrollimage').attr("disabled","disabled").off('click');
});
$('.fullimagecont').click(function() {
var image_clicked_id = $(this).attr('id');
/*$('.transparent').hide().animate({width:'20%'},"slow");
/*$('.gallery-wrapper').show(1000);*/
$('#'+image_clicked_id).hide().animate({width:'20%'},500);
});
});
Here is the html part
<div class="content_area">
<div class="transparent" style="display:none;width:100%;height:100%;float:left;position:relative;z-index:900;"></div>
<div class="fullimagecont" id="fullimage5">
<img src="img/5.jpg">
</div>
<div class="fullimagecont" id="fullimage6">
<img src="img/6.jpg">
</div>
<div class="fullimagecont" id="fullimage7">
<img src="img/7.jpg">
</div>
<div class="fullimagecont" id="fullimage8">
<img src="img/8.jpg">
</div>
<div class="fullimagecont" id="fullimage10">
<img src="img/10.jpg">
</div>
<div class="gallery-wrapper" id="scrollimage" style="white-space:nowrap;overflow:hidden;line-height:0;">
<img src="img/gallery/5.jpg" class="space-image" id="5"
/><img src="img/gallery/7.jpg" class="space-image" id="7"
/><img src="img/gallery/8.jpg" class="space-image" id="8"
/><img src="img/gallery/10.jpg" class="space-image" id="10"
/><img src="img/gallery/6.jpg" class="space-image" id="6" />
</div>
<div class="div-slide-effect">
</div>
</div>
PLease help
Here is the .css
.fullimagecont
{
position:absolute;display:none;width:25%;height:100%;left:5%;top:0;z-index:999;
}
I think this should fix it
Set the overflow property of the body hidden,on the click of the popup open event
$('body').css('overflow','hidden');
and set it to auto on popup close
$('body').css('overflow','auto');
Hope this helps, Thank you
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.
I have a series of thumbnails. One by default has an active class of "p7_current" applied to it which puts a border around this image. The others all have a class of "p7_inactive" which removes the border.
I'd like it if in this group of 6 thumbs that the last one clicked has the class of "p7_current" and the rest are assigned "p7_inactive".
How could I go about this with jquery?
<div class="p7_postcard_thumbs">
<img src="images/p7_pc1.jpg" class="p7_current" />
<img src="images/p7_pc2.jpg" class="p7_inactive" />
<img src="images/p7_pc3.jpg" class="p7_inactive" />
<img src="images/p7_pc4.jpg" class="p7_inactive" />
<img src="images/p7_pc5.jpg" class="p7_inactive" />
<img src="images/p7_pc6.jpg" class="p7_inactive" />
</div>
$('.p7_postcard_thumbs img').click(function(e){
$('.p7_postcard_thumbs img').removeClass('p7_current p7_inactive').not(this).addClass('p7_inactive');
$(this).addClass('p7_current');
});
jsFiddle example
You can actually reduce it to one line although perhaps it isn't as easy to read:
$('.p7_postcard_thumbs img').click(function(e){
$(this).addClass('p7_current').closest('div').find('img').not(this).attr('class', 'p7_inactive');
});
JSFiddle: http://jsfiddle.net/lucuma/4jSCM/3/