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.
Related
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'm trying to show a Modal Box , I have an Image That When user Clicks on it , it will show The Modal Box,
it Works perfectly when using Chrome , but unfortunately it fails when using IE.
HTML :
<div id="pin" class="tooltip">
<img onclick="document.getElementById('modal').style.display='block'"
src="pin.png" width="40" height="40">
<span class="tooltiptext">Show</span>
</div>
<div class="gallery animate" id="modal">
<div class="content">
<span class="close" onclick="document.getElementById('modal').style.
display='none'">×</span>
</div>
</div>
Instead wrap the document.getElementById('modal').style.display='block'
In a Js function and then call the function in onclick event
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.
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