Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>
Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle
Related
I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
i am trying to create a responsive image that when to click on it another image opens and when you click on the new picture it goes away... disappears.
thanks !!
this is my code:
<div class="item">
<div id="img1"><"https://www.istockphoto.com/il/photos/lion-cub?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=lion%20cub" /></div>
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick=diffImage(this) />
<img src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.display='none';"/>
</div>
The below code works in a similar approach to yours.
I have used the visibility CSS property instead of display and added the correct javascript into the onclick event of the first image
<div class="item">
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick="document.getElementById('other-image').style.visibility='visible'" />
<img id="other-image" src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.visibility='hidden';"/>
</div>
I would recommend looking in to javascript in more detail to be able to do this in a more reproducible way.
I've been trying to call a modal pop up
<div class="image content">
<div class="ui medium image">
<img style="max-width:400px;" src="" id="imgretprd">
<br/>
<div class="ui tiny images" style="width:500px;" align="left">
</div>
</div>
</div>
Now in my html
<img id="imgretprdlist{{$product->productId}}" src="data:image/png;base64,{{base64_encode($image_prod->Blob1)}}"/>
I wanted to call the image that is retrieved here on the modal pop up above on my click function.
I tried using this code
var ret_prodImg = document.getElementById('imgretprd');
ret_prodImg = document.getElementById('imgretprdlist'+id).src;
But that's not working. It shows me blank only. Where am I going wrong?
Any answers to this will be appreciated.
I use ratchet.js to slider many images.
But now I want to click an element 'a'/'button' trigger the 'slider' method . And I want to destory browser method when we drag/touch page to left .It will turn to next tab .
Only allow people to jump by clicking on the button.
The html code like this:
<div class="slider" id="slider">
<div class="slide-group">
<div class="slide">
<img width="100%" src="/mobile/images/guide/1.jpg">
</div>
<div class="slide" id="slide-2">
<img width="100%" src="/mobile/images/guide/2.jpg">
</div>
<div class="slide" id="slide-3">
<img width="100%" src="/mobile/images/guide/3.jpg">
</div>
<div class="slide" id="slide-4">
<img width="100%" src="/mobile/images/guide/4.jpg">
</div>
</div>
</div>
I try to use code like this to solve this problem.
document.body.addEventListener('slide', function (e) {
e.preventDefault();
return false;
});
but it does not work ...
how to solve this problem ~~
Here is slider source code:
https://github.com/twbs/ratchet/blob/master/js/sliders.js
It looks the code is tied directly to touch events (touchstart/move/end), and it does not provide functions for manually controlling the slides.
This means it would be very difficult do what you want with Ratchet's built-in slider, so it is best if you use something else for the slider.
I just solved this problem by ratchet like this ..
<div class="guide-content" id="guide">
<div class="guide-tab active" id="slide-1">
<img width="100%" src="/mobile/images/guide/1.jpg">
</div>
<div class="guide-tab" id="slide-2">
<img width="100%" src="/mobile/images/guide/2.jpg">
</div>
<div class="guide-tab" id="slide-3">
<img width="100%" src="/mobile/images/guide/3.jpg">
</div>
<div class="guide-tab" id="slide-4">
<img width="100%" src="/mobile/images/guide/4.jpg">
</div>
</div>
Then I used
window.location.href = "#slide-3";
Just like "../guide#slide-3" to show the next page/tab , and are not allowed to switch pages sliding by slide .
In fact, you can only use tabs to achieve this effect without ratchet.js .
I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.