Develop Reference

jquery modal image with keydown left and right

i need to navigate my modal image with keyboard, but i don't know jquery action to change prev and next image, this is my JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
$('.modal').css({
display: "block"
});
$('.modal-content').attr("src", src);
$(this).keydown(function (e) {
if (e.keyCode == 37) { //move left
//change to prev image
} else if (e.keyCode == 39) { //move right
//change to next image
}
});
});
});
});
and my html is :
<div class="container">
<img src="img/bg1.jpg" alt=""/>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
<img src="img/bg2.jpg" alt=""/>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
</div>
i think i need jquery index to indexing my image, but how perform that?
or there is another method?
Fiddle here
thanks

Basically you need to bind keydown event with window and store currently open image object in a global variable.
Try this
updated jsfiddle
HTML
<div class="container">
<img src="http://placekitten.com/200/300" alt="" />
<img src="http://placekitten.com/200/287" alt="" />
</div>
<!-- The Modal -->
<div class="modal">
<span class="close">×</span>
<img src="" class="modal-content" alt="">
</div>
Javascript
$(document).ready(function() {
var $thisImage;
$('.container img').click(function() {
$thisImage = $(this);
var src = $thisImage.attr('src');
$('.modal').css({display: "block"});
$('.modal-content').attr("src", src);
});
$(window).keydown(function(e) {
if (e.keyCode == 37) { //move left
if($thisImage.prev().is('img')){
var prev = $thisImage.prev().attr('src');
$thisImage = $thisImage.prev();
$('.modal-content').attr("src", prev);
}
}
else if (e.keyCode == 39) { //move right
if($thisImage.next().is('img')){
var next = $thisImage.next().attr('src');
$thisImage = $thisImage.next();
$('.modal-content').attr("src", next);
}
}
});
$('.close').click(function() {
$('.modal').css({
display: "none"
});
});
});

How to fade out a page then direct to a new page

I was just wondering how to fade out a page then open up another html page. Right now I have:
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
I want it so that when "close" is clicked, the page fades out then then opens up my index.html page?
Currently my code is not working :(.
Thanks in advance!

Try this
HTML
<div class="close" data-link="https://www.youtube.com">
<div class="lr">
<div class="rl">LOREM IPSUM DOLORs</div>
</div>
</div>
JS
$('.close').click(function() {
var destination = $(this).data("link");
$("body").fadeOut(1000,function(){
window.location.replace(destination);
});
});

There is no a tag in your html. This code should work.
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>

Your JavaScript has an extra closing bracket and closing parenthesis. You are also missing your a
<div class="close">
Click Here
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function(e) {
e.preventDefault();
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
</script>
JS Fiddle: https://jsfiddle.net/4wz9uqwd/

$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "scroll");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Live example:
www.damianodesign.com

Issues scrolling to div with jQuery

I am having trouble creating a jQuery function that is called by an HTML onclick event handler that finds the ID of that particular element, adds a "#" to the start of it and "-container" to the end and assigns it to a variable. This variable is then used to scroll the window to that particular div. My HTML is as follows and the jQuery function is below it.
<div class="skill-grid">
<div id="science" onclick="ScrollToDiv()">
<div class="skill-text">science</div>
</div>
<div id="coding" onclick="ScrollToDiv()">
<div class="skill-text">coding</div>
</div>
<div id="photography" onclick="ScrollToDiv()">
<div class="skill-text">photography</div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
The function in jQuery I have written is as follows:
<script type='text/javascript'>
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top }, 2000);
}
</script>
I do feel like I am missing something very simple. Any help would be much appreciated! I am also open to a new/better way to do this!
My thanks for your time,
Finn

update this:
onclick="ScrollToDiv(this)"
// in the above parameter you have to pass the current object's context.
pass the current context in your method. and update the function as:
function ScrollToDiv(el) { // <---get the current object from the param here
var container = "#" + $(el).attr('id') + "-container";
//----^^^^^ wrap it as jQuery object
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
Try to be unobtrusive as much as possible:
As you are using jQuery do this:
put your original function in global scope:
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
and add this script:
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});
Or if you can change your ids to class like this:
<div class="skill-grid">
<div id="science">
<div class="skill-text">science</div>
</div>
<div id="coding">
<div class="skill-text">coding</div>
</div>
<div id="photography">
<div class="skill-text">photography</div>
</div>
</div>
<div class="science"></div>
<div class="coding"></div>
<div class="photography"></div>
then you can do this:
function ScrollToDiv() {
var container = "." + this.id;
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});

re-think your html struct if you can:
<div class="skill-grid">
<div id="science">
<div class="skill-text"><a class="click" href="#science-container">science</a></div>
</div>
<div id="coding">
<div class="skill-text"><a class="click" href="#coding-container">coding</a></div>
</div>
<div id="photography">
<div class="skill-text"><a class="click" href="#photography-container">photography</a></div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
<script>
$(function(){
$('a.click').on('click', function(e){
var offset = $(this.hash).offset().top;
$('html, body').animate({
scrollTop: offset
}, 2000
);
return false;
});
});
</script>

how to make the div autohide when click other button

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.

jQuery thumbnail replace method (Needs solution for adding A tag)

I've got a thumbnail replace solution, I need to add an a tag around an img item and still have the same functionality.
The jQuery
$(".large").click(function () {
var thumbRel = $(this).attr("rel");
$(this).effect("transfer", { to: $(".thumbnail img[rel='" + thumbRel + "']") }, 1000);
});
$(".thumb").click(function () {
$(".thumbnail [class^='thumb']").removeClass("current");
$(this).addClass("current");
$(".large").attr("rel", $(this).attr("rel"));
$(this).effect("transfer", { to: $(".large") }, 1000);
$(".large").animate({ opacity: 1 }, 1000);
$(this).queue(function () {
$(".large").attr("src", $(this).attr("src").replace("-thumb", ""));
$(".large").animate({ opacity: 1 }, 1000);
$(this).dequeue();
});
});
The markup is mixed with Dot Net, but here it is
<div class="product_images">
<div class="mainImage">
<a class="ShowProductImageDlg" href="#" onclick="ProductImagesDlgClientSide.showDialog('#Model.ProductToDisplay.Product.UrlSlug', 'Bottle'); return false;" >
<img class="LargeImage" src="#Model.ProductToDisplay.Product.awsImageUrlLarge" alt="#Model.ProductToDisplay.Product.ProductName" />
</a>
</div>
<strong>Additional Images</strong>
<div class="thumbnail">
<ul>
<li><a href=""><img class="SmallImage Bottle" src="#Model.ProductToDisplay.Product.awsImageUrlSmall"
alt="#Model.ProductToDisplay.Product.ProductName" /></a></li>
<li><a href=""><img class="SmallImage BackLabel" src="#Model.ProductToDisplay.ProductAdditionalImageUrlSmall(awsProductImageType.BackLabel)"
alt="#Model.ProductToDisplay.Product.ProductName" /></a></li>
</ul>
</div>
</div>
The end goal, is to have the entire div that the image is in clickable (which is 90px by 90px) when the image itself is only 80x35.
I want to use the same jQuery.

You can do this like that (see jsfiddle as a proof):
var link = jQuery('<a>', {
'href': 'http://www.google.com/',
'title': 'Dynamically generated link'
});
jQuery('img').wrap(link);
Basically you first create a link (<a> element) and then wrap it around the images selected by the img selector (you can adjust it to your needs).