I'm using an image slider on my site: http://arirang.hr/cocohouse/accommodation/CHfood_en.html . It works well for me.
When visitor click a thumbnail below the slider it jumps to the particular image. It's done by having a click function for the each thumbnail. Started with few thumbnails only. Having quite a lot now. Ended up with a long list of click functions there.
Guess that a proper way should be by some kind of loop there. When visitor clicks any thumbnail to start the loop that finds which one is clicked and call the cycle with the clicked number.
Change all your images to use a class instead of ids like:
<input type="image" class="goTo" src="../images/cocohouse/accommodation/thumbnails/tn_CHfood_29.png" width="80" height="60">
Then, do this:
$('.goTo').click(function( event ) {
event.preventDefault(); // you dont need this line for your code, see comment below for explanation
var cur = $('.goTo').index( $(this) );
$('#acc_sl').cycle(cur);
});
first off u should present some sort of effort of what you have done so far. This is not a site where you can order solutions.
To fix your problem you should have one function that takes image name or some sort of identifier as an argument. That way you only use one function for every picture.
Related
I have these divs that I can toggle onclick to scale larger one at a time. It works perfectly except that once one is enlarged, one is always enlarged. I am using toggleOpen for this. I am looking to be able to make it so that it can do what it already does, but then onclick of the enlarged div have it go back to its original size without having to toggle with another div. In other words, I need a way to make the page go back to a state where all the divs are in original size. I have tried else statements to no avail as well as adding another function to remove class. I only want a js solution - no jquery or anything else please. Here is the JS portion of it.
const event = document.querySelectorAll('.eventsBorder')
function toggleOpen() {
let opened = document.getElementsByClassName('large')[0];
if(opened!=undefined)
opened.classList.toggle('large');
this.classList.toggle('large');
}
event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));
Here is my codepen
Thanks in advance for any help!
The opened variable gives you back a list of all the HTML elements which have the large class, and when you click again on an already enlarged div that automatically satisfied this criteria. So, what happens is that if you click on the same item twice, your toggleOpen function first removes the large class from that item and then adds it again because of the following line in your code-
this.classList.toggle('large');
The best way to achieve what you want would be to make sure that in addition to opened not being undefined, you should also make sure opened is not the same item as the one you clicked on. You can accomplish that using-
if(opened != undefined && opened != this)
Here is a link to the updated codepen to see it in action.
So it looks like you are using querySelectorAll to select all elements with the class "large", then you're toggling the class. If you toggle the class, it will no longer be a part of that query selection, as it no longer has that class applied, so it will not be able to remove it.
const event = document.querySelectorAll('.eventsBorder')
event.forEach(eventsBorder =>
eventsBorder.onclick = () =>
eventsBorder.classList.toggle('large'));
This seems to accomplish what you'd like.
The purpose - an image gallery.
As opposed to creating each gallery-image inside a 'gallery' div, like below:
<div id="html_collection">
<img src="picture_1">
<img src="picture_2">
<img src="picture_3">
</div>
I'm storing them inside a javascript array object - for simplicity, like below:
var js_collection = [
{
'gallery' : 'picture_1.jpg',
},
{
'gallery' : 'picture_2.jpg',
},
{
'gallery' : 'picture_3.jpg'
}
From there I will create an empty <div id="carousel"></div> inside the HTML file and append each 'gallery' image into it dynamically through JS, by clicking 'next' and 'previous' buttons. These buttons will cycle through the js_collection array.
For example:
function showCarousel(x) {
var slide = document.createElement('img')
slide.src = js_collection[x].gallery
var output = carousel.appendChild(slide)
}
The concern - I feel like redrawing the img node and fetching the current img from the JS collection everytime we hit next or previous.. may be dirty in a way. I know the same result can be achieved by showing and hiding imgs in the first 'html_collection' option - but I prefer the flexibility of the second implementation. Can I get away with it, or is this just wrong?
EDIT: I went with Leeish's suggestion and created a div like so,
<div id='carousel'>
<img id='carousel_slide' src='nameOfFirstSlideHere.jpg'>
</div>
From there, I dynamically switched the img 'SRC' rather in redraw the 'IMG' itself each time. Cheers
My concern about your script approach is that the user may experience a noticeable delay upon every click of the next/previous button while waiting for the next image to be retrieved, at least as your script is currently written. On the other hand, if the number of images is large, there would be a significant up-front delay in the HTML version as you waited for the entire group of images to load.
I think the best solution would be one that preloaded at least enough images to make sure that when the user clicks the button, the next or previous images is (at least usually) already loaded so the only delay is the tiny one to append the content. If your images are small, you might consider using CSS sprites to load several images at once and cut down on the number of HTTP requests, though this would require a bit more coding.
The other option, which is simpler to code, but doesn't reduce the number of image requests, would be have your showCarousel method create an image object, load the src, and append to the carousel for image x + 1, but hide that image x + 1 initially and show image x. That way, assuming the user spent a few seconds looking at each image, the user should see image x essentially immediately, while x + 1 gets ready just in case the user asks for it.
I know this has been asked before but the answers given did not work for me and my scenario is in any case slightly different.
I am just starting to evaluate nanoGallery, which looks good for my requirement which is to run a slideshow of inline image references. But I simply want to run the slideshow from a link rather than having to display a set of thumbnails and then clicking/tapping on one to actually start the slideshow. Which doesn't seem to me to be a particularly unusual requirement, especially for a very large slideshow where the set of thumbnails would occupy far too much space on the screen.
My HTML is simply:
<a id="startlink" href="javascript:void(0)" style="margin-bottom: 40px;">run slide show</a>
<div id="nanoGallery">
<a id="first" href=... data-ngdesc=... />
...
So I have tried:
$(document).ready(function () {
$("#startlink").click(function (e) {
$("#nanoGallery").nanoGallery({
slideshowAutoStart: true,
...
});
$("#first").trigger("click");
});
});
I have tried various alternatives, including placing the script block at the end of body rather than in head, simply doing click() rather than trigger("click"), referencing $("#nanoGallery").children()[0] rather than $("#first"), and so on. I have even tried the createEvent/dispatchEvent approach as suggested elsewhere. But all I ever get is the row of (in my case empty as I have not supplied thumbnail images) thumbnail blocks which I still have to click on to start the slideshow. So it is possible that nanoGallery uses a different event or events rather than click? Has anyone actually got this to work with nanoGallery?
I have also seen a suggestion to use 'deep linking' using a hash value in the URL to identify the gallery/album in question, but I have no idea how to generate or determine this value and it may be that this only works with an online image repository such as Picasa.
Jon
I'm using a jquery code to display an image slideshow on my website, with a counter.
When clicking on the image, img swicth between show and hide.
here is the jquery code i'm using :
$(document).ready(function () {
var count = $('.image_news').length;
$("#total").text(count);
// set display:none for all members of ".pic" class except the first
$('.image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides = $('.image_news');
$slides.click(function () {
// stores the currently-visible slide
var $current = $(this);
if ($current.is($slides.last())) {
$("#current").text("1");
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$("#current").text($current.next().index()+1);
$current.hide().next().show();
}
});
});
it works fine with one slideshow, but I would like to have several sildeshow on the same page, and I don't know how many so I can't add a unique ID to my images ('.image_news')...
is there a way of doing it using $this ? I need also to have unique counter for each slideshow, and the slideshow to be fully independant... when clicking on first slideshow to navigate, only the first slideshow should slide.
hope someone can help me with this, or maybe there's another way of doing it...
here is a jsfiddle to see it in action :
http://jsfiddle.net/XRpeA/19/
thanks for your help
I can't write the codes exactly but I can give ideas to design it. I think you should think object oriented way. Because you want to use more than one instance of sliders. If I were you, I'd do these to get the results you want.
Make a slider class whose constructor takes 'class name' as a parameter. For example in your situation, you have used "image_news" for class name. For each of sliders, use different class names. With using this, there will be no longer problem for separation between different sliders in the page.
Define the click method exactly as above.
I may have forgotten sth but with these design there is no more problem for multiple slider in one page.
I'm adding new functionalities to my web design and I'm having problems with an absurd thing with jQuery.
I've an element that I want it make an append when it's clicked.
My code is:
$("#add").click(function() {
$("#list").append("<div id=\"item\"></div>");
});
And it runs quite good. The problem is that this new element (div) is only showed while the function is running (every time I clicked, it appears and disappears).
I've seen a lot of examples how to do this and everywhere people says that this is the correct way, but in my case, it isn't.
How I can solve this stupid problem?
I think what you're seeing is the item is added, then the page reloads afresh and you don't see the item any more. You probably need to prevent the default action of whatever you are clicking on:
$("#add").click(function(e) {
e.preventDefault();
$("#list").append("<div id=\"item\"></div>");
});
If this is ever going to be clicked more than once, then you shouldn't have duplicate ID values either so perhaps use a class name:
$("#add").click(function(e) {
e.preventDefault();
$("#list").append('<div class="item"></div>');
});
As #Satpal suggested , you cannot use duplicate ID names in HTML . Instead you could use a class name for your appended item .
$("#list").append("<div class=\"item\"></div>");
jsFiddle example : http://jsfiddle.net/6m2Gx/