I want make a jquery slideshow with show text(each text in title tag <img>) in following image without use plugin, i tried as: (it doesn't work [i should use of class div.mediumCell for tag img and text it])
DEMO: http://jsfiddle.net/pzyxk/
$('.fadein .mediumCell:not(:first)').hide();
setInterval(showNext, 3000);
function showNext() {
$('div#caption').remove();
var current = $('.fadein :first-child');
var next = current.next('.mediumCell');
current.fadeOut("slow", function () {
$(this).appendTo('.fadein');
})
caption(next);
$(next).next(".mediumCell").andSelf().fadeIn()
};
function caption(element) {
$('<div class="mediumCell"/>').hide().html($(element).attr("alt")).insertAfter($(element)).fadeIn();
};
How is fix it?
For you html are:
<div class="presentaion">
<span class="caption"></span>
<img src="http://www.ct4me.net/images/Showing_Grade_1.jpg" width="100px" title="MyTitle_1" />
<img src="http://www.ct4me.net/images/dmbtest.gif" width="100px" title="MyTitle_2" />
<img src="http://celticevolution.com/images/test-201.gif" width="100px" title="MyTitle_3" />
</div>
And JS are:
show($('div.presentaion img:first')); // show first slide
function show(el) {
el.parents('div.presentaion').find('img').hide(); // hide all slide
el.prev('span.caption:first').html(el.attr('title')); // show caption from title
el.show(); // show image
setTimeout(function() {
if (typeof(el.next('img:first')) != 'undefined') {
show(el.next('img:first')); // set timeout to show next
}
}, 3000);
}
Edited here, jsfiddle
Related
So I have a simple slideshow using JavaScript to fade images in and out, where all but one of the img elements do not have a href attribute. I would like to put the href attribute of the image into the href attribute of the caption (actually the img alt attribute) so that the text is clickable when the particular slide shows up, and becomes unclickable when the slide goes to the next one. I am very inexperienced in JS and cannot find any resources online to help me with this particular issue. Here is the part of my HTML file (called Finley.html) that is used, and my slideshow.js file.
<section>
<!-- Slideshow -->
<h2 id="caption">Car ride home! First time meeting each other.</h2>
<img id="slide" src="images/Finley/car_ride_home.jpg" alt="">
<div id="slides">
<img src="images/Finley/car_ride_home.jpg" alt="Car ride home! First time meeting each other.">
<img src="images/Finley/he_lay.jpg" alt="Handsome boy!">
<img src="images/Finley/awwww.jpg" alt="First photo together">
<img src="images/Finley/photogenic_af.jpg" alt="Papa, we made it to the community Instagram!" href="https://google.com" target="_blank">
<img src="images/Finley/first_vet.jpg" alt="First vet trip was successful">
<img src="images/Finley/blop.jpg" alt="blop.">
<img src="images/Finley/squishy_cheek.jpg" alt="Car rides make me sleepy">
<img src="images/Finley/first_beach.jpg" alt="First time at the beach and I got rocked by the waves">
<img src="images/Finley/sploot.jpg" alt="sploot.">
<img src="images/Finley/floopy_ears.jpg" alt="My family loves how floopy my ears are!">
<img src="images/Finley/daisy_gf.jpg" alt="Playing with my friend Daisy!">
</div>
</section>
slideshow.js:
$(document).ready(function() {
//declare variables
var nextSlide = $("#slides img:first-child");
var nextCaption;
var nextSlideSource;
// the function for running the slide show
var runSlideShow = function() {
// write the function
$("#caption").fadeOut(1000);
$("#slide").fadeOut(1000,
function() { //callback function
if (nextSlide.next().length == 0) {
nextSlide = $("#slides img:first-child");
} else {
nextSlide = nextSlide.next();
}
nextSlideSource = nextSlide.attr("src");
nextCaption = nextSlide.attr("alt");
if (nextCaption == "Papa, we made it to the community Instagram!") {
$("#caption").attr("href", nextSlide.attr("href"); $("#caption").attr("target", nextSlide.attr("target");
}
$("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text(nextCaption).fadeIn(1000);
}
); //callback
}; //ready
// start slide show
var timer1 = setInterval(runSlideShow, 5000);
// here's one way to code this app without using the toggle event method
$("#slide").click(function() {
if (timer1 != null) {
clearInterval(timer1);
timer1 = null;
} else {
timer1 = setInterval(runSlideShow, 1000);
}
});
})
This code displays the caption as text above the image, and the image stays on screen for 5 seconds before fading to the next image. To clarify, I'd like the caption text that appears to become a hyperlink to Google (actual site censored) for the one picture when it is displayed, and then return to normal once the next picture comes up. I tried putting line 21-24 in to test for the caption and set the attribute, but those lines stop the slideshow from working (remove those lines to see how it should behave). Maybe it's something in the if statement in line 21, but I'm not sure how to proceed. Any help or tips would be appreciated!
You can do it either like this:
this.hasAttribute('href');
or
$(this).is('[href]');
More Info
I have seen a few things close to what I want but am not sure how to implement to what I'm doing.
The below code all works fine but have now been asked to make the hover stay in place when each button is clicked. How would I go about this? Or is it better to start again using buttons and not divs?
Here is a jsfiddle (not sure why all the divs are showing here, live only the first one does which is correct)
Example of button:
<div id="tab1" class="tab" style="height:50px; width:160px; background-color:#CCC; float:left;">
<img src=".../images/landing/terms-coach.jpg" onmouseover="this.src='.../images/landing/terms-coach-col-2.jpg'" onmouseout="this.src='.../images/landing/terms-coach.jpg'" />
</div>
https://jsfiddle.net/uqxdum1o/
I've modified the markup and JS a bit to get there but I think this code should fulfil the tab requirement and remove some of the inline JS.
Essentially, store the active image src in an attribute for each tab button:
<div id="tab1" class="tab" style="..."
data-image-active="./images/button1-active.jpg"
data-image="./images/button1.jpg">
<img src="./images/button1.jpg" />
</div>
Then use this to set active state in your javascript for each tab button. I've moved your current code for click handling into this each loop too.
$(document).ready(function(){
var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').each(function() {
$(this).hover(function() {
setButtonActive($(this));
}, function() {
if (!$(this).hasClass('active')) {
setButtonInactive($(this));
}
});
$(this).click(function() {
resetAllButtons();
setButtonActive($(this));
$(this).addClass('active');
var $target = $('#' + this.id + 'show').show();
$contents.not($target).hide();
})
});
});
function setButtonActive(button) {
var img = button.find('img'),
imgSrc = button.attr('data-image-active');
img.attr('src', imgSrc);
}
function setButtonInactive(button) {
var img = button.find('img'),
imgSrc = button.attr('data-image');
img.attr('src', imgSrc);
}
function resetAllButtons() {
$('.tab').removeClass('active').each(function() {
setButtonInactive($(this));
});
}
I'm learning jQuery and I need to figure out how to not hard-code. So I have 2 different divs (master and popup) being populated by an array. The first div (master) is visible and the second (popup) that I'm using as a pop-up is hidden. On the view, you see an image in the div( master) and when it is clicked, I have a jQuery function that triggers the hidden div (popup) to show up.
Now if 10 items are gotten from the array, I have 10 images displaying but when I click on any image (including the first), only the first image in the array populates the popup div.
I hard-coded a 'fix' based on my current jQuery knowledge but this is repetitive code which means I can only have the amount of divs declared in my jQuery. I need to find a way that each image displays it's corresponding popup without having to hard code it in all the way
My html code:
Master div:
<div class="master">
<div id="imgprop"><img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="238" width="238" /></div>
<div id="ps1" class="popit1" #hard coded popit id>
<section>
<span>IMAGE TITLE</span>
<span id="zoom"></span>
</section>
</div>
</div>
<div class="master">
<div id="imgprop"><img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="238" width="238" /></div>
<div id="ps1" class="popit2" #hard coded popit id>
<section>
<span>IMAGE TITLE</span>
<span id="zoom"></span>
</section>
</div>
</div>
Popup div:
<div id="GbgPopup1" #hard coded gbpopup id>
<div id="GPopupcontent">
<div class="closeit"></div>
<span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
<div class="image">
<img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="400" width="430" />
</div>
</div>
</div>
<div id="GbgPopup2" #hard coded gbpopup id>
<div id="GPopupcontent">
<div class="closeit"></div>
<span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
<div class="image">
<img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="400" width="430" />
</div>
</div>
</div>
My jQuery code:
jQuery(function($) {
#hard coded
$(".popit1").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup1(); // function show popup
}); // .5 second
return false;
});
$(".popit2").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup2(); // function show popup
}); // .5 second
return false;
});
/* event for close the popup */
$("div.closeit").hover(
function() {
$('span.ecs_tooltip_').show();
},
function () {
$('span.ecs_tooltip_').hide();
}
);
$("div.closeit").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
var popupStatus = 0; // set value
#hard coded
function loadPopup1() {
if(popupStatus == 0) { // if value is 0, show popup
$("#GbgPopup1").fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
function loadPopup2() {
if(popupStatus == 0) { // if value is 0, show popup
$("#GbgPopup2").fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
#hard coded
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#GbgPopup1").fadeOut("normal");
$("#GbgPopup2").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
});
Every help and more jQuery resources to help improve my knowledge is welcomed
I hope I understand your question right. Do you want to know how to take the picture source from master and put it into the popup?
To get the src of the picture in master you can do this:
$(".popit").click(function() {
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(this); // function show popup
}); // .5 second
return false;
});
function loadPopup(clickedElement) {
if(popupStatus == 0) { // if value is 0, show popup
// first find the img tag from master
var imgSrc = $(clickedElement).parent().find("img").attr("src");
var popup = $("#GbgPopup");
popup.find("img").attr("src", imgSrc);
popup.fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
I'm sorry if there are bugs in the code, I did not run it. I trust you can remove the hard coded part from your code again.
create a master div and use http://api.jquery.com/appendto/ to dinamically generate every popup passing only the image and the counter
ie:
function generatePop(image, counter) {
var html = '<div class="ecs_tooltip_" id="pop"'+counter+"><img src=... </div>';
$(html).appendTo('#master-div');
}
After seeing Martin's answer, I was able to dig more into jQuery and adapt his answer to make it work.
All I did was move the code in loadpopup() function into the parent .click() function, change the $(".popit").click for the div(master) to $(".master").click to effectively select the whole div, used the $(this) so I can get the current clicked img in the master div and then replaced the src in the popup div
var popupStatus = 0; // set value
$(".master").click(function() {
var imgSrc = $(this).find('img').attr('src');
var popup = $("#GbgPopup");
popup.find("img").attr("src", imgSrc);
popup.fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
//return false;
});
I have a problem with my javascript.
I am trying to create a javascript that fades away a white/black png file when you hover over the div.
But the problem is that I have several divs and images, and one class.
How can I get this to work?
Put it all in a JSFiddle:
http://jsfiddle.net/auURQ/61/
All help is very appreciated :-)
<div class="aBlock first">
<div class="eTop">
<img src="http://www.designduck.dk/portfolio/img/project1.jpg" alt="project1">
<img class="overlay" src="http://www.designduck.dk/portfolio/img/white.png" width="360" height="135" alt="whitebox">
<img style="margin-left:43px;;margin-top:35px;" src="http://www.designduck.dk/portfolio/img/wordpress.png" width="270" height="60" alt="wordpress">
</div>
$(document).ready(function () {
$(".overlay").show();
$('.eTop').hover(
function () {
$('.overlay').fadeOut('slow');
},
function () {
$('.overlay').fadeIn('slow');
});
});
If I get it right, you want the animation to appear only to image that is currently hovered. For this you need to add following code:
$(document).ready(function () {
$(".overlay").show();
$('.eTop').hover(
function () {
$(this).children('.overlay').fadeOut('slow'); // selects element with class .overlay that is direct child of div that is currently hovered
},
function () {
$(this).children('.overlay').fadeIn('slow');
});
});
Here is updated jsfiddle - http://jsfiddle.net/auURQ/71/
Use $(this) first to spot the specific div.eTop and then find the contained image.
$(document).ready(function () {
$(".overlay").show();
$('.eTop').hover(
function () {
$(this).find('.overlay').fadeOut('slow');
},
function () {
$(this).find('.overlay').fadeIn('slow');
});
});
I have a set of images that correspond to video thumbnails. The user clicks a thumb which loads the browser. This would be simple enough, but I need to track which of the thumbs was clicked, so that I can automatically cue up the next video in sequence.
My first thought was to do something like this (highly simplified example):
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" />
<img id="vt_1" src="thumbxxx01.jpg" />
<img id="vt_2" src="thumbxxx02.jpg" />
<img id="vt_3" src="thumbxxx03.jpg" />
<img id="vt_4" src="thumbxxx04.jpg" />
<img id="vt_5" src="thumbxxx05.jpg" />
<img id="vt_6" src="thumbxxx06.jpg" />
</div>
<script type="text/javascript">
var videos = [ "xxx00", "xxx01", "xxx02", "xxx03", "xxx04", "xxx05", "xxx06" ];
var video_index = null;
function playVideo(id) {
// play video then call "onVideoFinish()" when video ends.
}
function onVideoFinish() {
video_index = (video_index = 6) ? video_index : video_index+1;
playVideo(videos[video_index]);
}
$j("div.thumbnail img").live("click", function (e) {
e.preventDefault();
var selected_id = $(this).attr("id").split("_")[1];
video_index = selected_id;
playvideo( videos[video_index] );
});
</script>
At first glance this seems to be okay, but I'm not sure if this is the best/most elegant solution, especially as I'd be implementing all these methods from within an object context.
This is how I would do it. The only global that you need in this case is currentPlayOrder, which could be stored someone as part of a preferences or configuration model.
First the HTML. I moved the video sources into the rel attribute of the associated thumbnail. I assume that your application is generating the thumbnails, in which case, this would be an appropriate method since whatever generates the thumbnail HTML could be made aware of the associated video sources.
<div class="thumbs">
<img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/>
<img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png" rel="videoB"/>
<img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/>
<img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png" rel="videoD"/>
<img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/>
<img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png" rel="videoF"/>
<img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/>
</div>
Now the JS. Notice the use of previousSibling and nextSibling to determine play order:
<script type="text/javascript">
var PLAY_ORDER_BACKWARD = "previousSibling";
var PLAY_ORDER_FORWARD = "nextSibling";
var currentPlayOrder = PLAY_ORDER_FORWARD;
$(document).ready(function() {
$(".thumbs img").each(function(i, node) {
$(node).click(function() {
playVideo(this.getAttribute("rel"), this);
});
});
});
var playVideo = function(source, thumbNode) {
console.log("Play video %s", source);
onVideoFinish(thumbNode);
// If your video play accepts a callback, you may need to pass it as
// function() { onVideoFinish(thumbNode); }
}
var onVideoFinish = function(thumbNode) {
// Get the next img node (if any) in the appropriate direction
while ( thumbNode = thumbNode[currentPlayOrder] ) {
if ( thumbNode.tagName == "IMG" ) { break; }
}
// If an img node exists and it has the rel (video source) attribute
if ( thumbNode && thumbNode.getAttribute("rel") ) {
playVideo(thumbNode.getAttribute("rel"), thumbNode);
}
// Otherwise, assume that there are no more thumbs/videos in this direction
else {
console.log("No more videos to play");
}
}
</script>
Hope that helps.
Here's how I would do it.
Instead of storing the video names inside an array, why not store the video name along with the thumbnail?
You can use the class attribute to store the name of the video.
Once you take this approach, things become simple.
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/>
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/>
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/>
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/>
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/>
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/>
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/>
</div>
<script type="text/javascript">
function setupVideoPlayer(order)
{
//lastThumb won't be accessible from outside of setupVideoPlayer
//function.
var lastThumb = null;
var imageSelector = 'div.thumbs img';
function playVideo(video)
{
//Play the video.
onVideoFinish();
}
function onVideoFinish()
{
//If order is 'ascending', we will go to the 'next'
//image, otherwise we will go to 'previous' image.
var method = order == 'asc' ? 'next' : 'prev';
//When user is at the end, we need to reset it either at the
//first image (for ascending) or the last (for descending).
var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1;
//When video has finished playing, we will try to
//find the next/prev (depending upon order) sibling of 'lastThumb',
//If we can not find any sibling, it means we are at the
//last/first thumbnail and we will go back and fetch the first/last
//image.
//Also, instead of calling the playVideo method, we will
//fire the click event of thumbnail. This way, if you decide to
//do something in future (say playing an ad before the video)
//you only need to do it in your click handler.
if($(lastThumb)[method]().length == 0)
$(imageSelector).get(resetIndex).click();
else
$(lastThumb)[method]().click();
}
$j(imageSelector)
.click(
function()
{
//on click, we store the reference to the thumbnail which was
//clicked.
lastThumb = this;
//We get the name of the video from the class attribute
//and play the video.
playVideo($(this).attr('class'));
}
);
}
$(document).ready(
function() { setupVideoPlayer('asc'); }
);
</script>
Above code has the advantage that you can modify your HTML and it will automatically play those videos.
You can wrap the images with an anchor tag and use the onClick method as follows:
<img src="thumbxxx00.jpg" />
<img src="thumbxxx01.jpg" />
...