Image gallery pagination - javascript

I have created the following image gallery.
http://jsfiddle.net/sfiddle/Nf7yR/7/
I think the thing is, that even though I can get a hand on the paragraphs css, the currentIndex won't update, i.e. an event listener seems to be missing.
var thumb = document.getElementById("thumb");
myParagraphs = thumb.getElementsByTagName("p");
console.log(myParagraphs[1]);
function thumby(){
$(myParagraphs[currentIndex]).css("background-color", "red");
}
thumby();
The thing is that I can not manage to link the image index with the index of the pagination dot (which has a normal p tag).
I want to code it in that way that if the first picture is displayed the first dot is red, if the second image is displayed the second ...
How could I approach this?
Thanks for any good advice as I invested a few hours already but can not get my head around it.
PS: no, I want no plugin or ready made imagegallery, I want my approach to work :-)

You made a function thumby() but you are calling it only once (during script start). You just need to call it when you change currentIndex. Here you have fixed code: http://jsfiddle.net/Nf7yR/10/ (I commented my edits).
BTW your code looks terrible. You should indent it properly to make it easier to read :)

Related

Cloning more than one image javascript

I'm trying to use this glitch effect in a slideshow, so it can work I have to clone the source image 3 more times. The first image works just fine, it's when I try to add the second image of the slideshow that the problem comes up. Instead of cloning que second image itself, the first image kind of reads that like one of it's clone.
Here's a fiddle of what I got so far https://jsfiddle.net/oqbf6kkc/
I think the main problem is the javascript but I can't really understand.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})
Trailing commas are always a problem.
Please remove the comma present in front of nth-child selector
.glitch-image img:nth-child(2), {
Also, I am not sure about the effect you mentioned but there is some problem with your JS code as well. You are not iterating over all of the elements.
$(document).ready(function(){
$(".glitch-image img").clone().appendTo(".glitch-image").end()
})
I made some changes to your code.
Check them here.

Automate page turning with jFlip

I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.
You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

images being replaced when I want the next image just added

I have a javascript function which animates images like a slide show. What I'd like is to just have the images being displayed one after another from left to right.
I can't seem to find where in the code the images is getting replaced.
var realoffset = d.offset % d.total;
$(this)
.html(d.titles[realoffset])
.attr('action','article:'+(realoffset+1))
.fadeIn(600);
$(this)
.siblings('img')
.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
.attr('action','article:'+(realoffset+1))
.fadeIn(600);
.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
This code is replacing the src of the img tag. You're going to want to be inserting new img tags to show them side by side, not replacing the current tag's src.
Did you write that jQuery snippet yourself? I'm guessing not. Anyway, there are a lot of factors involved in creating a "slideshow" with JavaScript. It sounds like you just need some general knowledge about the subject.
First, let's get your vision straight. Based on your code, you seem to want to fade images into view as they are cycled in the slideshow. For that, study this example:
http://jsfiddle.net/Y6fnx/1/
Now, your code does stuff with d.titles; purely by inference I'm guessing that this displays the image and also a caption for the image? For that, study my updated fiddle:
http://jsfiddle.net/ESP9S/1/
There are countless ways to create a slideshow! You can implement auto-play by taking advantage of JavaScript's setTimeout. You can load your captions from somewhere else. You can get your images from a external script (like Barbara mentioned). You can slide your images instead of fading them by playing with jQuery animate. It never ends!

Removing appended html using jQuery?

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.
empty() is always an option
jQuery('#main').empty();
Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/
I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.
Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.
It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();

Categories

Resources