I found this sample and it looks good, so I put a thumbnail from bootstrap.
http://www.bootply.com/129165
And I like to implement it to the site my developing.
http://hotmeltcoatingmachines.com/
what I want is to flip the thumbnail thru button click.
How can I do that.
Thanks
<div class="flip">
<div class="card">
<div class="face front">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>front</h3>
<p>...</p>
<p>Flip Button</p>
</div>
</div>
</div>
<div class="face back">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>back</h3>
<p>...</p>
<p>Button flip</p>
</div>
</div>
</div>
</div>
</div>
</div>
sample code
http://www.bootply.com/pZXSuyPPWx
The answer by #menaka will flip all the icons. If you want to flip only the icon that was clicked then use something like below:
$('.fliper-btn').click(function(e){
$(e.target).closest('.flip').find('.card').toggleClass('flipped');
});
Make sure you keep the custom class fliper-btn as suggested by #menaka.
Flip
change JQuery code like this
$('.fliper-btn').click(function(){
$('.flip').find('.card').toggleClass('flipped');
});
and give flip action buttons a custom class name like 'fliper-btn' and add it like this
Flip
Related
thanks for reading, I try to use swiper.js and it works fine with the lazy loading demo, but in the demo, there is only one image per slide, but I want to represent 4 imgs per slide, which turns out only the first img in each slide will show up.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
<img data-src="1.jpg" class="swiper-lazy">
<img data-src="2.jpg" class="swiper-lazy">
<img data-src="3.jpg" class="swiper-lazy">
<img data-src="4.jpg" class="swiper-lazy">
<img data-src="5.jpg" class="swiper-lazy">
<!-- Preloader image -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="3.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="4.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
</div>
</div>
so, I am trying to read the jquery code in swiper.js, and due to my ability, I can not figure it out, tbh, I can not understand.
any help?
I got it.
As long as I am using the same src with the ones in the slides after, it was lazy loaded too. After replacing all the data-srcs with diff ones, it works.
Thank, swiper.js
I've tried to customize a Flexslider with a thumbnail slider by adding some information and a button in the thumbnail. If you click on the thumbnail, the slider slides to the right slide. But if you click on the added link(in the thumbnail) you don't go to a URL behind it.
How can I make this to work?
This is the code that i've been using:
<div id="carousel">
<ul class="slides cntr cb">
<li>
<div class="image"><img src="url" alt=""></div>
<div class="info">
<p>Title</p>
<div class="more">
<span>Date</span> | BUTTON
</div>
</div>
</li>
<li>
<div class="image"><img src="url" alt=""></div>
<div class="info">
<p>Title</p>
<div class="more">
<span>Date</span> | BUTTON
</div>
</div>
</li>
</ul>
</div>
I fixed it with a simple javascript onclick function, I don't now if this is the best way to fix it. But hey, it works for now
onclick="window.open('http://www.url.com', '_self')"
My aim is to keep 2 images side by side in large screens and one above another in small screens.The problem what I have done is doing the opposite.In large screens images are coming one above another and in small screens images are coming side by side.
Please see this fiddle.
This is my html code
<!--nav bar-->
<div class="container">
<div class="row">
<div class="col-md-18">
<div >
<img src="http://www.computerhope.com/logo.gif" alt="Logo" class="round"> my user
</div>
</div>
<div class="col-md-6">Recently purchased
<div id="slideshow">
<span class="images">
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/abstract" />
<span class="caption simple-caption">
<p>Review</p>
</span>
</div>
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/food" />
<span class="caption simple-caption">
<p>Review</p>
</span></div>
</span>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>
I have not posted the js codes because I feel its not necessary But if you want then please check the fiddle
Please see the screenshot,
Add img-responsive class to image tag and not div tag. Also col-lg-18 not possible to have 18 columns unless you have customised it, by default 12 is the max columns u can have.
I have a container containing two divs A nd B
A contains few img tags while B contains a slider ..
The structure is as follows
<div id="container">
<div id="mainCHimage">
<img id="favIcon">
<img id="mainImg">
</div>
<div id="imageSlider">
<img class="arrow left">
<div class="images" id="images_zazzle_tshirts">
<div class="imageHolder catMatchB" style="display: block;">
<a href="http://productUsage.php?prodId=39" target="_blank">
<div class="sliderImgWrp">
<img src="../shop/uploads/large/1367904170_link-10351582.jpg">
</div>
</a>
</div>
</div>
<img class="arrow right">
</div>
</div>
I just want the imageslider shud stay until i am mouseout of whole container div..But inner div comes and are conflicting .. i have written the jquery functions ..U cn check in my demo ... Plz help me out...
Not working demo
Do not use mouseout or mouseover events but mouseenter and mouseleave - they trigger only if you enter/leave the element you attached them to; 100% no conflicts.
Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>
The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?
Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.
Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());