I am using this fiddle but i want more than one images sliding with hover effect,this link only shows one image slide i want more than one image to slide on it.
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
Related
I have an image slider like this:
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
</div>
<img width="100" height="100" class="smallimage_forslide1" id="smallimage" src="http://web.mit.edu/bzbarsky/www/testcases/css3-issues/blackSquare.png">
<p class="text1" id="text1id">This is slide 1.</p>
<p class="text2" id="text2id">This is slide 2.</p>
<p class="text3" id="text2id">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
</div>
Click on the fiddle to see it in action with css and javascript: https://jsfiddle.net/9xm2c9er/2/
As you can see, all of these elements are shown:
"This is slide 1.", "This is slide 2.", "This is slide 3.", and the small, black square image.
How can I hide "This is slide 1." and the black square image when I slide to "slideimage2", and vica verca with "slideimage1" and "slideimage3"?
I've been thinking about adding some sort of if statement within the "Next" and "Previous" javascript, but how can I detect when nth slide image is slided to?
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
if($('.inner_wrapper img:eq(0)')) {
$('#text1id').show();
$('#smallimage').show();
}
else {
$('#text1id').hide();
$('#smallimage').hide();
}
});
I believe the if statement I used here doesn't work, as it prevented the slider from appearing.
I appreciate all contributions - thanks a lot!
Edit: For clarification, I would like to mention that the slider has more than 2 images, and that I have several different tag elements that I would like to hide/show; < p > (text), < a > (links), and < img > (smaller images over slides).
I have already included a basic image slider in the fiddle that you can use that work with images, and any absolute positioned elements in it. However, in my fiddle, they will be visible on all the slides.
Based on the two answers I have currently received, they both can change one type of elements for each individual slides (in these answers, the p tags), by indexing a common class. They both work in a similar manner.
However, I have yet to choose a solution, as I still need to figure out how to do this with several different elements for each slide, in terms of number and types. For example, on the first slide, I can have 2 < a > links, and 4 < p > text tags, and 1 < button >, but on the second slide, I may have a different number of elements.
Edit 2: Here is a fiddle with the solution: https://jsfiddle.net/n0z6u07p/1/. By wrapping elements in divs, you can show/hide them depending on the image slided to in the slider.
Here is the approach I use for similar problems as yours: First hide all elements, then show the only needed (selected) one.
So the code should look like this:
HTML
...
<p class="text text1" id="text1id">This is slide 1.</p>
<p class="text text2" id="text2id">This is slide 2.</p>
...
JS:
...
var iText = 0;
var aTexts = $('p.text'), nTexts = aTexts.length;
function showText(i) {
aTexts.hide().eq(i).show();
}
showText(0);
$('.next').click(function () {
...
iText = (iText + 1) % nTexts;
showText(iText);
});
$('.prev').click(function () {
...
iText = (iText - 1 + nTexts) % nTexts;
showText(iText);
});
Fiddle
I added data to your img tags :
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" data-index="1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" data-index="2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
<img id="slideimage3" data-index="3" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/500px-Red.svg.png" alt="Red Square">
</div>
<p class="label text1" id="text1id">This is slide 1.</p>
<p class="label text2" id="text2id" style="display: none;">This is slide 2.</p>
<p class="label text3" id="text3id" style="display: none;">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
And I made a function to show/hide your labels :
document.getElementById("outer_wrapperID").className = "outer_wrapper_show";
$('.inner_wrapper img:eq(0)').fadeIn(500);
$('#outer_wrapperID').fadeIn(500);
$('.inner_wrapper img:gt(0)').hide();
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
toggleLabels();
});
$('.prev').click(function () {
$('.inner_wrapper img:first-child').fadeOut();
$('.inner_wrapper img:last-child').prependTo('.inner_wrapper').fadeOut();
$('.inner_wrapper img:first-child').fadeIn();
toggleLabels();
});
var toggleLabels = function () {
$("p.label").hide();
var firstIndex = $('.inner_wrapper img:first-child').data("index");
$("p.text"+firstIndex).show();
};
Hello everyone and thank you for your time.
I made a Menu with 2 images.
I want Bxslider to change and show different images each time someone clicks 1 of the 2 "Menu images"
So the idea i had is to hide 1 of the 2 bxsliders and swap when i click menu any ideas how i can do that?
Here is what i managed to make so far
Here is the 2 images menu:
<div class="Menu1">
<div class="Menu1_1"> <a href="a"class="reload-slider1" ><img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4" ></a>
</div>
<div class="Menu1_1" >
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>
Here are the scripts for the Bxslider:
<---BxSlider----->
<script>
var slider = $('.bxslider1').bxSlider({
mode: 'horizontal'
});
$(document).ready(function(){
$('.bxslider2').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
$(document).ready(function(){
$('.bxslider3').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
<script>
$('.reload-slider1').click(function(e){
e.preventDefault();
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
$('.reload-slider2').click(function(e){
e.preventDefault();
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_1.jpg"></li>');
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_2.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
</script>
Your HTML appears invalid:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4 ; reload-slider">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5 ; reload-slider2">
</div>
It contains invalid ID, and probably that is why document.getElementById() is not working for you. Change the id of the img tags:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>
My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.
i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.
You should do
$('#foo a').click(function(e){
e.preventDefault();
});
Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/