I'm trying to make an image slider. It takes in images from placekitten. I want it to be able to take different image sizes. On hover it gives a small description of the image at the bottom,name of the image at the top and nav button slide from the top.
I have 2 problems:
1.I have tried to implement the toggles many times using jquery, but nothing I do seems to work. I think it has something to do with the buttons since the buttons are there for each image. How to change the title of the image but keep the same button inputs
2.How to make the description expand as the text increases.
This is what I have so far. Also are there easy libraries to do this as well?
JS Bin link
use this jQuery cycle plugin.just change your images with your code. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>
<div id="slideshow" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
</div>
</body>
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
after: onAfter,
timeout: 0
});
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
</script>
</html>
for more jQuery cycle plugins visit : jQuery cycle plugins
Related
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
I am working with a book and in the book I am learning jquery's slideDown/Up method. I ran the code originally on my main web page and it will not work. So I just created a simple YES.html(seen above) to make sure I was coding it correctly. However it will not slide up or down image. I don't know what I am missing for this to work. I am a beginner so I could be missing something simple. Please explain your answer/solution in steps if possible or maybe guide me to a web page tutorial of some sort. Thanks.
are you looking for something like this?
$('#make_visible').on('click', function (e) {
/* method 1 */
/*if ($('#dramatic').css('display') === 'none') {
$('#dramatic').slideDown();
$(this).html('Hide');
}
else {
$('#dramatic').slideUp();
$(this).html('show');
}*/
/* method 2 */
$('#dramatic').slideToggle();
this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />
You didn't import jQuery, to use jQuery UI you have to import jQuery first.
Think this helps:
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
jQquery UI needs jQuery to function, so you should include that first. I used jQuery 1.3.2 as that seem to be the best fit for jQuery UI 1.8.
The book might be a bit dated as the latest version is 1.12.
I also changed the "onclick" code a bit:
$( "button#make_visible" ).click(function() {
$("img#dramatic").slideDown();
});
img#dramatic { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
</body>
I'm trying to change the class name for a tab when I click it. I also want it to change back to the original one when I click a different tab.
I setup a very basic webpage just for testing. The full code of the page is copied below. Right now, this isn't working as it should, even though similar code was tested in JSfiddle and did work there. Note that the design part is showing up fine. Here are the two css rules that are part of this and the code for the full page follows:
.member_nav { float:left; margin-right:1px;height:65px;text-align:center;background-color:#636464;padding:0 20px 0 20px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
.member_nav_clicked { float:left; margin-right:1px;height:65px;text-align:center;background-color:#0099cc;padding:0 10px 0 10px;font-size:15px;font-weight:bold;color:#fff;line-height:60px;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Nav</title>
<link href="css_new/style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$('.member_nav').on('click', function() {
$(this).addClass('member_nav_clicked').siblings().removeClass('member_nav_clicked');
});
});
</script>
</head>
<body>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
</body>
</html>
Here is the code I found that was causing everything to not work on the real site. This was in the head right below the jQuery call:
<script type="text/javascript">
var popup_jq = jQuery.noConflict();
popup_jq(document).ready(function() {
popup_jq("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'showCloseButton' : true
});
});
</script>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there
Try something like this:
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
jsFiddle example
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image.
This will work for however many images you add. As long as they have the class slideshow.
Also this allows you to crossfade images. See below for non-crossfade below.
See this Fiddle.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE
You can add the following css to get the images to display in the same space.
.slideshow { position:absolute; }
According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? If so, will this not work?
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ...
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
On my website's homepage, I'm looking to incorporate a rotating banner.
I have a selection of images (4), which currently change every 5 seconds.
However, what I would really like is to develop something similar to what Oracle has done - http://www.oracle.com/index.html
You can see their banner is made up of 3 parts:
1) The main image in the middle.
2) A header - that displays an icon for each image.
3) A footer which is by default hidden, but slides up upon a selection.
Any ideas of how I could even get started? I am using HTML and jQuery.
Thanks
Update 29-05-13
Apologies forgot to upload my current code:
HTML:
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2500);
}
#rotator img { position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<link href="rotate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
</script>
</head>
<div id="rotator">
<img src="https://dummyimage.com/600x400/000000/fff&text=1" />
<img src="https://dummyimage.com/600x400/000000/fff&text=2" />
<img src="https://dummyimage.com/600x400/000000/fff&text=3" />
<img src="https://dummyimage.com/600x400/000000/fff&text=4" />
</div>