The long and short of it is I'm trying to use a carousel, and instead of using next and previous buttons to navigate to other images, I want to use image mapping to link to other images. I'm quite stuck, so I appreciate any advice!
My carousel is from this site's tutorial (https://christianheilmann.com/2015/04/08/keeping-it-simple-coding-a-carousel/
). Here's my html code:
<ol class="content">
<li>
<img src="http://lorempixel.com/200/200" alt="mag" usemap="#map" class="img-responsive">
<map name="map">
<area shape=poly coords="500,80,1080,80,1080,550,500,550" href="img2" title="vent1" > <!--where should href link to?? -->
</map>
</li>
<li><img src="http://lorempixel.com/199/200" alt="2"></li>
<li><img src="http://lorempixel.com/200/199" alt="3"></li>
</ol>
My javascript:
carousel = (function(){
// Read necessary elements from the DOM once
var box = document.querySelector('.simbox');
var next = box.querySelector('.next');
var prev = box.querySelector('.prev');
// Define the global counter, the items and the
// current item
var counter = 0;
var items = box.querySelectorAll('.content li');
var amount = items.length;
var current = items[0];
box.classList.add('active');
// navigate through the carousel
function navigate(direction) {
// hide the old current list item
current.classList.remove('current');
// calculate the new position
counter = (counter + direction) % amount;
counter = counter < 0 ? amount - 1 : counter;
// set new current element
// and add CSS class
current = items[counter];
current.classList.add('current');
}
// add event handlers to buttons
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});
// show the first element
// (when direction is 0 counter doesn't change)
navigate(0);})();
You asked "where should href link to?"
you can link it to href="javascript:navigate(1)" that way, when you click on the area, it will fire the navigate(1) function that will cause the carousel go to the next item.
Related
I am trying to add a template to the DOM using jquery. I wait for all the images to be loaded on the DOM, then grab all the images in a particular div, add a template to the DOM(which is a two card grid), and then use .each to loop over all those images and append them using the template to create multiple two card grids.
The issue is that it doesn't show up on the DOM.
Here is the code below:
<script>
function moveImages() {
var $gallery = $('#gallery');
// The template below will only have a 2 card grid. Hence an img counter.
var imgcount = 1;
// Initializing section counter for the 2 card grid. When img counter = 2, we increment it below so that we can have a new section ID to
// append the next two images one by one.
var sectioncount = 0;
//Here is the HTMl template, as the imgcount crosses 2, we create a new section. notice the dynamic variable below for sectioncount.
var template = `<section class="card-grid-section section-${sectioncount}" loading="lazy">
<a class="card-grid-two-image">
<div>
<picture id="card-one-two-grid-section-${sectioncount}">
</picture>
</div>
</a>
<a class="card-grid-two-image">
<div>
<picture id="card-two-two-grid-section-${sectioncount}">
</picture>
</div>
</a>
</section>`;
//getting the html for the article-text id above.
var test = $('#article-text').find('p').each(function(index, value) {
//looping over all the children of each p tag below which are mostly span and img
var children = value.childNodes;
children.forEach(function(item, index1){
// if the tag is a span, then we append it to the div with id gallery.
if(item.tagName == "SPAN"){
$gallery.append(`<p><span>${item.innerHTML}<span></p>`);
console.log("ADDED SPAN TO GALLERY");
}
//if tag is an img
else if(item.tagName == "IMG"){
//I want to skip the first image here
if(imgcount > 0){
if(imgcount == 1){
//appending the template to gallery only if imagecount = 1.
$gallery.append(template);
//item here, is an image. I am adding the first image to the card one of the first grid(template). Notice the sectioncount dynamic variable below.
var $card1 = $(`#card-one-two-grid-section-${sectioncount}`);
//Appending image to card one
$card1.append(item);
} else if(imgcount == 2){
//if image count is 2, we are adding the the second image to template we created above.
var $card2 = $(`#card-two-two-grid-section-${sectioncount}`);
$card2.append(item);
//Since image count is 2, we want a new grid id. Hence the sectioncount++.
sectioncount++;
//since we can only add two images to grid. I am setting imgcount back to 0;
imgcount = 0;
}
}
//Incrementing img count below.
imgcount++;
}
});
});
}
$(document).ready(function($) {
});
</script>
I think you meant to write something like this:
function gridTemplate(section) {
return $(`<section class="card-grid-section section-${section}" loading="lazy">
<a class="card-grid-two-image">
<div>
<picture id="card-one-two-grid-section-${section}"></picture>
</div>
</a>
<a class="card-grid-two-image">
<div>
<picture id="card-two-two-grid-section-${section}"></picture>
</div>
</a>
</section>`);
}
$(function () {
var imgcount = 1, sectioncount = 0;
$('#article-text p > *').each(function () {
if (this.tagName === "SPAN") {
$('#gallery').append(`<p><span>${this.innerHTML}<span></p>`);
} else if (this.tagName === "IMG") {
if (imgcount == 1) {
$('#gallery').append(gridTemplate(sectioncount));
$(`#card-one-two-grid-section-${sectioncount}`).append(this);
imgcount++;
} else {
$(`#card-two-two-grid-section-${sectioncount}`).append(this);
sectioncount++;
imgcount--;
}
}
});
});
(You really should cut back on the comments that say exactly what the code says - they are hugely distracting.)
I have a div inside it has images carousel, and I'd like to append it to another DIV outside. However, I lost carousel on the new div outside. How can I enable carousel for the appended div?
online sample: http://jsfiddle.net/PYQXa/
<div class="inside">
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</div>
<div class="outside">
<!-- append content here -->
</div>
jQuery
var $inside = $('.inside');
$inside.hide();
var appendcontent = $inside.find('.slider').html();
$(appendcontent).appendTo($('.outside'));
// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
it would be working fine if you remove
var $inside = $('.inside');
$inside.hide();
var appendcontent = $inside.find('.slider').html();
$(appendcontent).appendTo($('.outside'));
var appendcontent = $inside.find('.slider').html();
The html() method returns the innerHTML of the jQuery element. In your example, it's a list of <li> nodes. Just replace the line with:
var appendcontent = $inside.find('.slider');
Edit : I've checked the fiddle again, you are appending only the 'li' into the new div. To have it work properly, you should use
$inside.find('.slider');
You were adding the slider class content into the outside class but .. u need to add inside content on outside div otherwise all anim related to slider class will be vanish..
var appendcontent = $inside.find('.slider').html();
var html = $inside.html();
$(html).appendTo($('.outside'));
And the slider need to select like this
var $slider = $('.outside .slider'); // class or id of carousel slider
DEMO
Because the appentcontent doesnt have the class "slider". You shold replace the line
$inside.find('.slider').html();
with
$inside.find('.slider').parent().html();
There are multiple images in HTML.
<ul class="ice-navigator">
<li>
<a href="javascript:void(0);" class="thumb" id = "26">
<img src="images/123.png" alt="Title #0" width="75" height="75"/>
</a>
</li>
<li>
<a href="javascript:void(0);" class="thumb" id = "28">
<img src="images/456.png" alt="Title #0" width="75" height="75"/>
</a>
</li>
.
.
.
</ul>
I want to show only 5 images at a time, so i am using this code "onload" to hide image if it is more than 5.
stPt = 0, elToShow = 5; //showing 5 elements
$ul = $('ul.ice-navigator');
$li = $('ul.ice-navigator li'); //get the list of li's
$copy_li = [];
copy_lgt = $li.length - elToShow;
for (var i = elToShow; i < $li.length; i++)
{
var tmp;
tmp = $li.eq(i);
$copy_li.push(tmp.clone());
tmp.remove();
}
To show prev and next, i am using this code.
$('.ice-next').click (function ()
{
$li = $('ul.ice-navigator li'); //get the list of li's
$copy_li.splice(copy_lgt, 0, $li.eq(0).clone() ); //move the 1st element clone to the last position in copy_li
$li.eq(0).remove(); //kill the 1st element in the UL
$ul.append($copy_li.shift()); //add to the last
});
$('.ice-previous').click (function ()
{
$li = $('ul.ice-navigator li'); //get the list of li's
$copy_li.splice(0, 0, $li.eq(elToShow-1).clone()); //move the 1st element clone to the last position in copy_li
$li.eq(elToShow-1).remove();//kill the 1st element in the UL
$ul.prepend($copy_li.pop());//add to the last
});
Everything works fine, except this:
There is one click event associated with thumb class.
jQuery(document).ready(function($) {
$(".thumb").click(function(){
alert ("Reaching here");
)};
)}:
This is working in beginning. but once we have used
$('.ice-previous').click (function () or $('.ice-next').click (function ()
then
$(".thumb").click(function(){ is not working.
I mean now click on image will not print Reaching here.
What is causing this issue??
Because you are removing and re-attaching DOM elements, you need to delegate your events on those elements like this:
$('.ice-navigator').on('click', '.thumb', function() {
alert('Reaching here');
});
More info: http://api.jquery.com/on/
Hi I have got a jsFiddle to share but never used it before so I hope I did it right..
http://jsfiddle.net/Mayron/3V62C/
I also have these screen shot to better show what I mean:
http://i.imgur.com/NgQk5P2.jpg
I have a table of images in the gallery page and when you click on an image it opens up a frame that shows a blank but much larger image which gains the source of the smaller image you clicked on. That works fine but I have all the images in the gallery listed in an array and the large frame has three buttons on it: previous, close and next. So far the JavaScript code allows you to click next and previous to go through them but it always begins the journey from array[0] and that is no good if you click to view the 6th one in the list from the gallery page first for example.
I hope that makes sense if not then let me know!
The issue is with this line that causes it to begin from the first image:
currentIndex = 0;
How can I change this so that the currentIndex number is the image that the user first clicks on?
There are several ways but that really depends on what you use and how clean you want your code to look. I put a hidden input in each of my divs and retrieve it with JQuery's $("input", $(this).parent()).val();
You could also use Jquery's index. http://api.jquery.com/index/
You could have it in a class and retrieve the class of the clicked item (same idea as having an ID for each image)
On click you can have a selector added in the class attribute then you can use a for-each to count how many images go through before you hit that class in your image order.
You could also do showLarge(this, index#) and set the index that way. I cannot get your JS fiddle to work though.
Do this for every image line:
<td><a href="#" onclick="javaScript:showLarge(this,1);" ><img class="imgBorder" id="image1" src="Media//Gallery//img_1.jpg" alt="Gallery Image 1" /></a>
</td>
This puts onclick in anchor tag and adds an id in the image tag named image1 (1 is the number you put in the anchor tag 2nd param)
In javascript, do:
function showLarge(img, index) {
var largeFrame = document.getElementById("zoomedIn");
largeFrame.style.visibility = 'visible';
var largeImage = document.getElementById("largeImage");
src = document.getElementById("image"+index);
largeImage.src = src.src;
currentImage = index;
}
This gets the image by id according to index clicked
For the next+prev button do:
function changeImage(direction) {
index = parseInt(currentIndex) + parseInt(direction);
if (index < 1) {
index = 1; // or use imgArray.length to rotate round
}
if (index > imgArray.length) {
index = imgArray.length; // or use 0 to rotate round
}
src = document.getElementById("image"+index);
document.getElementById('largeImage').src = src.src;
currentIndex = index;
}
Try something like this:
function findIndex(src) {
for (i = 0; i = imgArray.length; i++)
if (imgArray[i].src == src) {
currentIndex = i;
return;
}
}
function showLarge(img) {
var largeFrame = document.getElementById("zoomedIn");
largeFrame.style.visibility = 'visible';
var largeImage = document.getElementById("largeImage");
largeImage.src = img.src;
findIndex(img.src);
}
It will update the currentIndex value.
I've updated your jsfiddle: http://jsfiddle.net/RN4bN/
But I can't run it, so try directly on your code.
Put an ID on each of them which is the number of it from the array, then when it is clicked change the currentIndex to that.
I know there are a ton of questions on here about jquery image carousel, but they all refer to a plugin. I would like to make one from scratch. It's a pretty simple one, there are 2 buttons, one left and one right. when you click the left button, the position of the overall container that has all the images shifts to the left, and the right makes it go right.
This is what I have so far... Right now the problem is only the left button works. (the right button works only once you slide the image to the left once) And I also want it to animate across all the images, and go to the last image when you get to the end of the set of images
JS:
total_entries = $("image-entry").length;
var current_index = 0;
var slider_entries = $('#slider-entries');
$('#home-slider #left').click(function(){
go_to_index(current_index-1);
return false;
});
$('#home-slider #right').click(function(){
go_to_index(current_index+1);
return false;
});
var go_to_index = function(index){
if(index < 0)
index = total_entries - 1;
if(index > total_entries - 1)
index = 0;
if(current_index == index)
return;
var left_offset = -1 * index * 720;
slider_entries.stop().animate({"left": left_offset}, 250);
//description_container.stop().animate({"left":left_offset}, 250);
current_index = index;
};
HTML:
<div id="slider">
<div id="slider-entries">
<div class="image-entry">
<img src="http://placekitten.com/720/230" />
</div>
<div class="image-entry">
<img src="http://placedog.com/720/230" />
</div>
<div class="image-entry">
<img src="http://placedog.com/720/230" />
</div>
</div>
</div>
total width of each image is 720px
total with of slider-entries is
Thanks
You have a problem with the total_entries variable.
First of all you need a "var" in front, to define that it's a new variable.
Second, you forgot a "." (dot) to search for the class in your HTML code..
your first line should be:
var total_entries = $(".image-entry").length;
Hope it works ;-)