I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)
Related
How to get slick slider every image offset. As my requirement, I have using fig caption in every image right bottom. So I need image offset. Anyone help me is this possible for the slick slider.
<div class="your-class">
<div>
<img src="images/img1.jpg" />
<div class=" img-cnt ">
<p>Image 1</p>
</div>
</div>
<div><img src="images/img2.jpg" />
<div class="img-cnt">
<p>Image 2</p>
</div>
</div>
<div>
<img src="images/img3.jpg" />
<div class=" img-cnt ">
<p>Image 1</p>
</div>
</div>
</div>
<script type="text/javascript ">
$(document).ready(function() {
$('.your-class').slick({});
});
</script>
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
This line just seems to not read in IE. But it works in Chrome, Firefox, and Safari. I'm not sure how this looks in other IEs, but the IE in question is IE 11. The problem is there is no fade transition of any kind displaying in IE, but I'm calling a fadeIn() and a fadeOut() and it reads everywhere else! In IE it just clunkily hides and then shows next slide. Any thoughts as to why..
$('.img-wrap .slideZ:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
Full code.
HTML:
<div class="paginateyo">
<div class="prevbox">
<img src="images/prev_arrow.jpg" id="prv" alt="Previous"/>
<span class="prvp">previous</span>
</div>
/
<div class="nextbox">
<span class="nxtp">next</span>
<img src="images/next_arrow.jpg" id="nxt" alt="Next"/>
</div>
</div>
</div>
<div id="img-grp-wrap">
<div class="img-wrap">
<div class="slideZ">
<img src="images/slide_image1.jpg" alt=""/>
<div class="captionZ">aaaaaaaaaaaaaa
</div>
</div>
<div class="slideZ">
<img src="images/slide_image2.jpg" alt=""/>
<div class="captionZ">bbbbbbbbbbbbbb
</div>
</div>
<div class="slideZ">
<img src="images/slide_image3.jpg" alt=""/>
<div class="captionZ">cccccccccccccccc
</div>
</div>
<div class="slideZ">
<img src="images/slide_image4.jpg" alt=""/>
<div class="captionZ">dddddddddddddddd
</div>
</div>
<div class="slideZ">
<img src="images/slide_image5.jpg" alt=""/>
<div class="captionZ">eeeeeeeeeeeeeeeeee
</div>
</div>
<div class="slideZ">
<img src="images/slide_image6.jpg" alt=""/>
<div class="captionZ">fffffffffffffffff
</div>
</div>
<div class="slideZ">
<img src="images/slide_image7.jpg" alt=""/>
<div class="captionZ">gggggggggggggggggg
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('.img-wrap .slideZ:gt(0)').hide();
$('.nextbox').click(function() {
$('.captionZ').fadeIn();
$('.img-wrap .slideZ:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});
$('.prevbox').click(function() {
$('.captionZ').fadeIn();
$('.img-wrap .slideZ:first-child').fadeOut();
$('.img-wrap .slideZ:last-child').prependTo('.img-wrap').fadeOut();
$('.img-wrap .slideZ:first-child').fadeIn();
});
});
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}
I am hoping someone can help me with this issue ...
I am wanting each of the 6 images to be it's own Gallery, and for the Life of me am Beyond Lost!
Here is the JS code:
$(function(){
// lightbox image
$(".lightbox-image").append("<span></span>");
$(".lightbox-image").hover(function(){
$(this).find("img").stop().animate({opacity:0.5}, "normal")
}, function(){
$(this).find("img").stop().animate({opacity:1}, "normal")
});
});
Here is the HTML:
<div class="pad_left1">
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img1.png" alt="">
<p><strong class="font1">Company Logos</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img2.png" alt="">
<p><strong class="font1">Business Cards</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img3.png" alt="">
<p><strong class="font1">Photography/Photo Edits</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img4.png" alt="">
<p><strong class="font1">Band Logos/Album Covers</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img5.png" alt="">
<p><strong class="font1">Random Designs</strong>???enter text here???<br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img6.png" alt="">
<p><strong class="font1">Websites</strong>???enter text here???<br>
</p>
</div>
</div>
</div>
It's simple try to do it this way if you need a set of gallery
<div>
image #1
image #2
image #3
</div>
<div>
image #4
image #5
image #6
</div>