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')"
Related
I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.
Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/
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
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.
I just edited slider of content using coda slider.
So I have a photo gallery and when I click on any photo it open a page with coda slider. Which image is clicked, that image is the first slider. Clicking on the next, the slider switch to the next photo, but clicking on the previous photo, the slider go back to the beginning and not to the previous photo.
In the gallery, it looks like this:
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#2"><img src="../photos/2.jpg" width="150" height="100" />
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">2<br /><br /></h6>
</div>
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#1"><img src="../photos/1.jpg" width="150" height="100"/>
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">1<br /><br /></h6>
</div>
So, bw_slider.html is the page that contain the coda slider.
Continuation of the link #1 and in the other case #2 is a direct link to specific slide that contain that id.
In the coda slider it look like this with much more slides:
<div id="1">
<h2>1</h2>
<img src="1.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
<div id="2">
<h2>2</h2>
<img src="2.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
The js of coda slider is on the link above.
Does anyone have any idea how to avoid a return to the beginning when starting slider from the middle of the slider content.