I am having trouble calling a custom plugin.. The plugin enlargeImage isn't being called at all from the imageSwap jQuery code. I am new and still learning js. At this point, I am not sure what I am doing wrong. Any help or guidance is appreciated :)
Plugin code
(function($){
$.fn.enlargeImage = function() {
return this.each(function() {
alert("This is working!");
// preload images
$("#image_list a").(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
// set up event handlers for links
$("#image_list").find("a").click(function(evt) {
// swap image
var imageURL = $(this).attr("href");
$("#image").attr("src", imageURL);
//swap caption
var caption = $(this).attr("title");
$("#caption").text(caption);
// cancel the default action of the link
evt.preventDefault(); // jQuery method that's cross-browser compatible
}); // end click
// move focus to first thumbnail
$("li:first-child a:first-child").focus();
});
}
})(jQuery);
jqUERY CODE
$(document).ready(function() {
$('#image_list').enlargeImage();
}); // end ready
Html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Swap</title>
<link rel="stylesheet" href="main.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.imageSwap.js"></script>
<script src="image_swap.js"></script>
</head>
<body>
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_list">
<li><a href="images/h1.jpg" title="James Allison: 1-1">
<img src="thumbnails/t1.jpg" alt=""></a></li>
<li><a href="images/h2.jpg" title="James Allison: 1-2">
<img src="thumbnails/t2.jpg" alt=""></a></li>
<li><a href="images/h3.jpg" title="James Allison: 1-3">
<img src="thumbnails/t3.jpg" alt=""></a></li>
<li><a href="images/h4.jpg" title="James Allison: 1-4">
<img src="thumbnails/t4.jpg" alt=""></a></li>
<li><a href="images/h5.jpg" title="James Allison: 1-5">
<img src="thumbnails/t5.jpg" alt=""></a></li>
<li><a href="images/h6.jpg" title="James Allison: 1-6">
<img src="thumbnails/t6.jpg" alt=""></a></li>
</ul>
<h2 id="caption">James Allison: 1-1</h2>
<p><img src="images/h1.jpg" alt="" id="image"></p>
</section>
</body>
Try replace this code
$("#image_list a").(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
to
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
Related
I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>
First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>
I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}
I am trying to get one link to open in a certain div.
When click on Jump link I need open the link on div id="container" and replace the image on the div with the webpage.
I have tried this code without success.
How to do resolve this?
Can you help me?
Thank you in advance for any help, really appreciated.
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
$(document).ready(function () {
$('input[readonly]').on('keydown', function (e) {
if (e.which === 8) {
e.preventDefault();
}
});
});
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
</script>
<ul class="sub_menu">
<li><a name="#container" href="http://...">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
#EDIT01
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu"">
<li><a name="#container" href="http://..." target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="image">
<img src="images/Logo.jpg" />
<iframe name="content" style="border:none;">
</iframe>
</div>
Why not use iframe?
function showPanel() {
document.getElementById('image').style.display = "none";
}
<ul class="sub_menu">
<li><a name="#container" href="www.example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="container" >
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" id="image">
<iframe name="content" style="border:none;">
</iframe>
</div>
Answer for edit #1: Your edit #01 is not working because you are hiding the entire div by id "image". Change div id to another name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu">
<li><a name="#container" href="example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="images">
<img src="images/Logo.jpg" id="image" />
<iframe name="content" style="border:none;">
</iframe>
</div>
You can create iframe on the fly and place it inside container div.
$('.sub_menu').on('click', 'li > a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#container').html('<iframe class="myiframe" src="'+url+'" />');
})
.myiframe{border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub_menu">
<li><a name="#container" href="/questions">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
I'm trying to write a callback function that fadein the next image after fadeout the old one. But it seems like I can fadeout the image but I only fadein the old image instead of the new one. I think the first $("#image") will be the old one, but I don't know why it's still the old image after I reset its attr. The same thing happens in the caption too.
This is my .js
$(document).ready(function() {
// set up event handlers for links
$("#image_list a").click(function(evt) {
$("#image").fadeOut(1000,
function(){
var imageURL = $(this).attr("href");
$("#image").attr("src", imageURL).fadeIn(1000);
});
$("#caption").fadeOut(1000,
function(){
var caption = $(this).attr("title");
$("#caption").text(caption).fadeIn(1000);
});
//var imageURL = $(this).attr("href");
//$("#image").attr("src", imageURL);
//$("#image").fadeIn(1000);
//var caption = $(this).attr("title");
//$("#caption").text(caption);
//$("#caption").fadeIn(1000);
// cancel the default action of the link
evt.preventDefault();
}); // end click
// move focus to first thumbnail
$("li:first-child a").focus();
}); // end ready
This is my .html
<body>
<main>
<h1>Ram Tap Combined Test</h1>
<ul id="image_list">
<li><a href="images/h1.jpg" title="James Allison: 1-1">
<img src="thumbnails/t1.jpg" alt=""></a></li>
<li><a href="images/h2.jpg" title="James Allison: 1-2">
<img src="thumbnails/t2.jpg" alt=""></a></li>
<li><a href="images/h3.jpg" title="James Allison: 1-3">
<img src="thumbnails/t3.jpg" alt=""></a></li>
<li><a href="images/h4.jpg" title="James Allison: 1-4">
<img src="thumbnails/t4.jpg" alt=""></a></li>
<li><a href="images/h5.jpg" title="James Allison: 1-5">
<img src="thumbnails/t5.jpg" alt=""></a></li>
<li><a href="images/h6.jpg" title="James Allison: 1-6">
<img src="thumbnails/t6.jpg" alt=""></a></li>
</ul>
<h2 id="caption">James Allison: 1-1</h2>
<p><img src="images/h1.jpg" alt="" id="image"></p>
</main>
</body>
</html>
It's a problem with this, note that as replacement of this
$("#image_list a").click(function(evt) {
// Here this is element of #image_list a
var that = this;
$("#image").fadeOut(1000, function(){
// Here this is element of #image
var imageURL = $(that).attr("href");
$("#image").attr("src", imageURL).fadeIn(1000);
});
$("#caption").fadeOut(1000, function(){
// Here this is element of #image
var caption = $(that).attr("title");
$("#caption").text(caption).fadeIn(1000);
});
//var imageURL = $(this).attr("href");
//$("#image").attr("src", imageURL);
//$("#image").fadeIn(1000);
//var caption = $(this).attr("title");
//$("#caption").text(caption);
//$("#caption").fadeIn(1000);
// cancel the default action of the link
evt.preventDefault();
}); // end click
It's foundation zurb 6/orbit slider.
How to display count current/total before the slidechange.zf.orbit event? Should I add some event before, on window load or something else?
First slide shows without counter, only when click it visible.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><li></li></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><li></li></button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/event-demo.png" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
<div class="slider-number"></div>
</div>
<script>
(function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
document.addEventListener("DOMContentLoaded", function() {
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
})();
</script>
The DOMContentLoaded event is just an event you are looking for.
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
So call the slideNumber() function one more time at this event:
<script>
document.addEventListener("DOMContentLoaded", function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
</script>
Foundation uses jQuery. So you can use the .ready() method instead of document.addEventListener("DOMContentLoaded" .... It looks like $(function() {.
Do not force a function to define totalItems and $('.slider-number')with each new call. Use global variables instead.
<script>
$(function() {
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
sliderNumber.html(currentItem + '/' + totalItems);
};
});
</script>
Please check the result: http://codepen.io/glebkema/pen/XjrLZj
$(document).foundation(); // initialize every Foundation plugin
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('.orbit').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
selectNumber.text(currentItem + '/' + totalItems);
}
.slider-number {
font-size: 36px;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<div class="orbit" role="region" data-orbit data-timer-delay="3000" data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous">◀︎</button>
<button class="orbit-next">▶︎</button>
<li class="orbit-slide is-active">
<img class="orbit-image" src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/96c/c9f/?text=4" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button data-slide="0" class="is-active"></button>
<button data-slide="1"></button>
<button data-slide="2"></button>
<button data-slide="3"></button>
</nav>
<div class="slider-number"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
I would like a javascript method to display image in div depending on which a href link is clicked.
I have written some code but it needs developing further.
<script type=" ">
function changeImg(){
var image1 = new Image();
image1.src='car.png'
var imghol = document.getElementById("imageHolder");
var elements = document.getElementById("FS");
if(elements.onclick = function()){
imghol = image1;
}
</script>
<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">
</div>
</div>
Keep it simple. Try this:
<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="ADS2">
<h2>Vehicle Part</h2>
<p>Please select a part you wish to find;</p>
<div class="vertical_menu">
<ul>
<li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
<li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
<li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
<li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
<li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
</div>
use this
HTML
<a onclick="changeImg('pic1.png')">Link 1</a>
<a onclick="changeImg('pic2.png')">Link 2</a>
<a onclick="changeImg('pic3.png')">Link 3</a>
<a onclick="changeImg('pic4.png')">Link 4</a>
.....
<div class="imageholder">
<img id="change_img_target" />
</div>
Javascript
function changeImg(url) {
document.getElementById("change_img_target").src = url;
}
You can also achieve this with jQuery. Be sure to include the jQuery library in your file. :)
HTML:
Link 1
Link 2
<div id="div">
</div>
jQuery (add this to the bottom of your page):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
function changeImg(url) {
var image = "<img src='url' />";
$("#div").html(image);
}
});
</script>
# Naveen,
You can achieve the solution using any of the following 2 answers.
Ans1:
<script type="text/javascript">
function preloader()
{
var imgs = ['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg']; // take array of images
var container = document.getElementById('photos');
var docFrag = document.createDocumentFragment();
imgs.forEach(function(url, index, originalArray) {
var img = document.createElement('img');
img.src = url;
docFragenter code here.appendChild(img);
});
container.appendChild(docFrag);
}
</script>
<body onload="preloader();">
<div>
<table width="100%" style="height: 100%;" border="0">
<tr>
<td>
<p id="photos" onclick="preloader()" />
</td>
</tr>
</table>`
</div>
Ans2:
function preloader()
{
var imgs=['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg'];
var container = document.getElementById('photos');
for (var i = 0, j = imgs.length; i < j; i++) {
var img = document.createElement('img');
img.src = imgs[i]; // img[i] refers to the current URL.
container.appendChild(img);
}
}
Link for more Help:
How to add a list of images to the document from an array of URLs?