Javascript AppendTo speed and a href link - javascript

I wish to link different sites to the pictures.
All I did is link the pictures to the same link.
So I want to link each pictures to the different website.
<!DOCTYPE html>
<html>
<head>
<style>
#rectangle{
width:2500px;
position:absolute;
margin-left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
$('.crimson').first().appendTo('#rectangle a' );
}, 2000);
});
</script>
</head>
<body>
<div id="rectangle">
<a href="html/Main.html">
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" /></a>
</div>
</body>
</html>
So adding 'a' behind the appendTo rectangle is the best thing I can do.

Try wrapping each picture in to individual <a></a>
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" />

$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
// $('.crimson').first().appendTo('#rectangle a');
}, 2000);
$('#rectangle .crimson').each(function () {
link = "html/Main" + $(this).index() + ".html";
$(this).wrap("<a href='"+link+"'/>");
});
});

Related

jQuery fadeOut is inconsistent

I'm using jQuery and I'm trying to fade images out and in. Well, it's kinda weird, the image sometimes stays for much longer than expected, sometimes there's no fade, sometimes it only fades in.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
startSlider();
</script>```
My assumption is that your internet is probably slowing down the execution of the code. If you switch to a different network, or run on a mobile connection, does the fade work as expected?
To ensure the sliding, you can put startSlider() inside jQuery document ready() event.
$(document).ready(function() {
startSlider();
});
here is a test:
<html>
<head>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
$(document).ready(function() {
startSlider();
});
</script>
</head>
<body>
<ul class="slides">
<li>item 1 <img src="https://i.imgur.com/HHSuvHp.png" style="width: 100px; height: 100px;"></li>
<li>item 2 <img src="https://i.imgur.com/oKe8JBR.png" style="width: 100px; height: 100px;"></li>
</ul>
</body>
</html>
Thank you all for trying to help, I'm not sure what the issue is but I've messed with the code and now it works:
$(function() {
$('.image img:gt(0)').hide(); // to hide all except the first image when da page loads
setInterval(function() {
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
}, 3000);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
.image {
position: relative;
}
.image img {
width: 100%;
position: absolute;
border-radius: 2%;
}
.h {
text-align: center;
}
.a {
font-family: 'Poppins', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>stuff</title>
</head>
<body>
<div class="h">
<h1 class="a">Automatic image transitions</h1>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1593642532009-6ba71e22f468?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
<img src="https://images.unsplash.com/photo-1620393470010-fd62b8ab841d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620406968602-f7e7cd9febce?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620415406067-68f6d8072fec?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620398399445-a5359701d43c?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620416530190-506ac680d67f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620321268133-000441fd17aa?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620399489382-8e77838306ff?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

Simple HTML Image Slideshow

I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

Javascript not working just by me

I got this code:
<!DOCTYPE html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
</script>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
</body>
And CSS:
#preview
{
background:#333;
border: solid 1px #000;
display: none;
color: #fff;
width: 200px;
}
All that from: http://jsfiddle.net/chrissp26/sd3ouo9g/ But it's not working by me like there, what could be the issue?
try putting it inside a $(document).ready like this :
$(document).ready(function() {
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
You are referencing DOM elements before the page is fully loaded. The only reason that code works in the JSFiddle you referenced is that they selected the onLoad option:
As Yourness suggests, use a DOM ready handler (which the JSFiddle onLoad does for you).
The shortcut versions of $(document).ready(function(){...}); are:
$(function(){...});
<script language="javascript" type="text/javascript">
$(function(){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Or the more robust version (which scopes a local $ at the same time):
jQuery(function($){...});
<script language="javascript" type="text/javascript">
jQuery(function($){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Option 3:
Or you can simply put your existing <script> block at the bottom of the body element (after the elements it references).
<body>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function() {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function() {
$("#preview").hide();
}
});
</script>
</body>

how to create JQuery picture viewer with next and back buttons

Am Looking for help to solve this problem i would like to create a simple image viewer with the following specifications.
MySQL Fetch Images
User Click One Image to view (picture-viewer popup, selected image
shown)
User be able to see NEXT image by clicking NEXT
User be able to see PREV image by clicking PREV
On ESC picture-viewer closed
Since am not good in JavaScript Nor JQuery so i just applied the basic to produce the following code which is not able to meet minimum expectations. Instead of showing the user selected image is showing the first image from the unordered list and is not working on IE unless i apply auto start the function i don't need. NEXT/PREV picture has to be shown only if user click next/prev.
<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
// close em_picture on esc press
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
em_picture_close();
}
}
function em_picture_close(){
document.getElementById('b1').style.overflow='auto';
$("#em_picture").hide();
$("#em_viewer").hide();
$(".images_tab").show();
$("#chart").show();
}
</script>
HTML
<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span>
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div>
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>
to those who can figure out this in other ways please do so, already made working code is accepted
Thanks and regards
ok for your ease, I'm eleborating it step by step:
download the files from the link.
place the lib and source folder in another folder.
place your file in which you're coding in the same folder.
place all images in same folder or whereever you want to place them
and write the code as
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox').fancybox(); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
As you want to create something like picture gallery, jQuery fancybox will be the best option for it. The simple and same as your requirements. please see here.
ok try this code :
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
}); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
</div>

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources