I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>
Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html
Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/
Related
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all
If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO
Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/
This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.
I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!
I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw
Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`
I'm slightly new to javascript and jquery and have an issue/question. I'm not sure if it can be done but I have faith that it can be. The thing is, I'm not sure how to best explain it so I'm having trouble finding the answer. First off, here is my code...
HTML
<div class="media">
<div class="file">
<button class="close"></button>
<img src="img/video-image.png" />
</div>
<div class="file">
<button class="close"></button>
<img src="img/record-image.png" />
</div>
</div>
Javascript
$(document).ready(function(){
$(".close").click(function () {
$(".file").hide();
});
});
Obviously, I want to click the button to make the image disappear and from what you can see, it will hide all divs with the file class. That's not what I want. I want to just close the div that contains the button you have clicked. I know that I can used ids but I would rather not. I have a lot more of the similar situations for what I'm working on and I am just looking for compact code. Hopefully this makes sense.
Much obliged!
try this
$(document).ready(function(){
$(".close").click(function () {
$(this).parent(".file").hide();
});
});
I'm having The following issue, this code:
<div class="image-container">
<div id="over-1" class="glass" onmouseout="$(this).stop().fadeOut();"></div>
<img src="img.jpg" onmouseover="$('#over-1').stop().fadeIn();" />
</div>
The mouse over and mouse out works fine, however on occasion the overlay image fades back in by itself after fading out, I have searched for a solution, so far being told to use jquerys hover function etc and similar, however so far no solution.
Can anyone help?
Set an additional fadeOut() call on the container "image-container" and it'll solve the issue
$(document).on("mouseover", ".image-container", function(){
$("#over-1").fadeOut();
});
Fiddle