I'm using Cycle2 Carousel plugin and this plugin sets a class for my thumbnails it's not okey so far because this plugin set .cycle-pager-active class both image and div that's why I have to set this class for only images.if you check it out my #thumbnail div bottom of the body tag you will see (inspect element) I gotta fix this problem what should I do ?
What I tried ?
I change this line
pagerActiveClass: 'cycle-pager-active',
with this line:
pagerActiveClass: 'img.cycle-pager-active',
but nothing happend
$(document).ready(function(){
$(".mySlideShow").cycle({
pauseOnHover: true,
pagerActiveClass: 'cycle-pager-active',
pager: "#thumbnail",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item"
});
});
.mySlideShow img{
width:700px;
}
#thumbnail img {
margin:10px;
}
.cycle-pager-active{
border:3px solid orange;
}
<div class="mySlideShow">
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
</div>
</div>
<div id="thumbnail">
<div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
Codepen Demo
Even though I think a better approach is to play around with your HTML, and make sure the thumbnails div is only used for images, here is a solution to literally achieve what you asked for :)
Modify the addClass method
(function() {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("cssClassChanged");
// return the original result
return result;
};
})();
Then listen to cssClassChanged event and remove the active class from non img elements
$(document).ready(function() {
var $slider = $(".mySlideShow").cycle({
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item",
pagerActiveClass: "cycle-pager-active"
});
$("#single-pager > :not(img)").bind("cssClassChanged", function() {
$(this).removeClass("cycle-pager-active");
});
});
DEMO: https://codepen.io/anon/pen/ZJjEGQ
Just create a div that will have the thumbnail divas the child.
<div class="first-div">
<h1> Nice thumbnail! </h1>
<div id="thumbnail"></div>
</div>
Your code will only add the active class to the content inside the #thumbnail
Related
I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.
When the carousel goes to the next slide the border on the thumbnails should move to the next thumbnail to correspond with that image change. They do not. I discovered this error when adding a closing div to .carousel-inner that wasnt there it was causing my carousel to collapse after the last slide. Here is the code.
HTML
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
<div class="item" data-slide-number="1">
<img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
</div>
CSS
.carousel-selector > .active, .selected img {
border: solid 2px #003C30;
}
JS
$('#myCarousel').carousel({
interval: 13000
});
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
var selectorIdx = $(this).closest('li').index();
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
});
Here's how you'd do it by index rather than all that string parsing.
$('.carousel-selector').click(function () {
$('#myCarousel').find('.carousel-selector').removeClass('selected');
var selectorIdx = $(this).addClass('selected').closest('li').index();
$('#myCarousel').find('.item').removeClass('selected')
.eq(selectorIdx).addClass('selected');
$('#myCarousel').carousel(selectorIdx);
});
Demo
Note that 1) I've added classes to each control element, and 2) I've removed the previous/next controls because they were overlapping the individual controls.
Here's a fun chained version:
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
Demo 2
Say for example i have a div with image source
<div>
<p class="row">With custom CSS</p>
<img src="/images/midhun.jpg">
</div>
On button click i need to open this image screen shot in another div
Can you tell the steps to take the screen shot of that image
Assuming, you want to show the image in other div.
HTML:
<div id="main">
<img src="https://lh5.googleusercontent.com/-XOGfvAHr7HQ/UvoUItkZMZI/AAAAAAAAHJk/IJz5JcUB9dw/w520-h274-no/scopes_in_directives.png" />
</div>
<div id="copy">
</div>
<button id="myButton">Click</button>
Javascript:
$('#myButton').on('click', function() {
$('#copy').html($('#main').html());
});
Demo: https://jsfiddle.net/tusharj/uapf99nt/
You don't need to take any screenshot. The image is already loaded, so you can just show the same image again:
HTML
<div id="originalDiv">
<img src="/images/midhun.jpg">
</div>
<div id="secondDiv">
<img src="" />
</div>
CSS
#secondDiv { display:none }
jQuery
$(document).on('click', '#button', function() {
var img = $('#originalDiv > img').attr('src');
$('#secondDiv > img').attr('src', img).show();
});
look here. it attempts to render a part of the dom, into an image
http://html2canvas.hertzen.com/
Check this link to take a screenshot..
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
hai im working with show/hide slider with div..evrything is working fine with my coding..
but i want my div or my content will auto hide when i click another button(image in my coding)..
i hope that anybody can help me with this..thanks in advance..
this is my html
<div id="slidingDiv">
<a href="#" class="show_hide" rel="#slidingDiv11">
<img src="../img/choose/mens.png">
</a>
<a href="#" class="show_hide" rel="#slidingDiv12">
<img src="../img/choose/womens.png">
</a>
<div id="slidingDiv11">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
<div id="slidingDiv12">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
</div>
<div id="slidingDiv1">
<a href="#" class="show_hide" rel="#slidingDiv16">
<img src="../img/choose/book.png">
<a>
<a href="#" class="show_hide" rel="#slidingDiv17">
<img src="../img/choose/textbooks.png">
</a>
<div id="slidingDiv16">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
</div>
<div id="slidingDiv17">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
</div>
</div>
this is my css
#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
height:300px;
padding:20px;
margin-top:10px;
border-bottom:5px;
display:none;
}
this is my js
$(document).ready(function () {
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View', // the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
if (options.changeText == 1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
With jQuery,
$("your_other_button").on('click', function() {
$("your_div_to_hide").hide();
});
Using Jquery
$("other_button").on('click', function() {
$("div_to_hide").toggle();
});
Since you want to hide the div when you click on a button, you should make it the document when clicked to hide. Try something like this.
$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });
use event.stopPropagation(); to stop the document event to trigger .hide_show class. May be that will help you.
I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.
Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>