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 .
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'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 generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result
Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});
(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});
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
I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example