I am trying to get the jQuery cycle plugin working in a CMS (hence the messy mark up) and have everything working except the paging thumbnails. Due to the CMS, I have to put the thumbnails' URLs in their corresponding image's class. Then I am trying to pull those URLs and use them for the paging buttons' images. The paging wrapper is being built, but each paging button is empty. Not sure what I am doing wrong.
I also have multiple cycle slideshows on the same page.
Here is my javascript:
(function ($) {
$('.gallery').each(function (i) {
$(this).after('<div class="galleryNav galleryNav' + i + '">').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
pager: '.galleryNav' + i,
pagerAnchorBuilder: function (idx, slide) {
var slideImg = $(slide).attr('class');
if (slideImg == undefined){
slideImg = "";
};
return '<div></div>';
}
});
});
})(jQuery);
and here is my HTML:
<div class="row">
<article class="galleryArticle">
<div class="galleryWrap">
<div class="gallery">
<img src="image1.jpg" class="image1Thumb.jpg" alt="image1" />
<img src="image2.jpg" class="image2Thumb.jpg" alt="image1" />
<img src="image3.jpg" class="image3Thumb.jpg" alt="image1" />
<img src="image4.jpg" class="image4Thumb.jpg" alt="image1" />
</div>
</div>
<header>
<h1 class="articleTitle">Title</h1>
<h2 class="eventDate">Date</h2>
</header>
<div class="articleContent">Article Content</div>
</article>
Thanks for the help.
The class name you given to the img tag is invalid
the class name should be start with a . and followed by a name but you gave name as
image1Thumb.jpg its invalid
just use like this
in your stle sheet
.image1Thump { your styles goes here }
in your html
<img src="image1.jpg" class="image1Thumb" alt="image1" />
Then it should work.
Related
I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.
This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});
I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});
I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup
I have an image slider like this:
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
</div>
<img width="100" height="100" class="smallimage_forslide1" id="smallimage" src="http://web.mit.edu/bzbarsky/www/testcases/css3-issues/blackSquare.png">
<p class="text1" id="text1id">This is slide 1.</p>
<p class="text2" id="text2id">This is slide 2.</p>
<p class="text3" id="text2id">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
</div>
Click on the fiddle to see it in action with css and javascript: https://jsfiddle.net/9xm2c9er/2/
As you can see, all of these elements are shown:
"This is slide 1.", "This is slide 2.", "This is slide 3.", and the small, black square image.
How can I hide "This is slide 1." and the black square image when I slide to "slideimage2", and vica verca with "slideimage1" and "slideimage3"?
I've been thinking about adding some sort of if statement within the "Next" and "Previous" javascript, but how can I detect when nth slide image is slided to?
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
if($('.inner_wrapper img:eq(0)')) {
$('#text1id').show();
$('#smallimage').show();
}
else {
$('#text1id').hide();
$('#smallimage').hide();
}
});
I believe the if statement I used here doesn't work, as it prevented the slider from appearing.
I appreciate all contributions - thanks a lot!
Edit: For clarification, I would like to mention that the slider has more than 2 images, and that I have several different tag elements that I would like to hide/show; < p > (text), < a > (links), and < img > (smaller images over slides).
I have already included a basic image slider in the fiddle that you can use that work with images, and any absolute positioned elements in it. However, in my fiddle, they will be visible on all the slides.
Based on the two answers I have currently received, they both can change one type of elements for each individual slides (in these answers, the p tags), by indexing a common class. They both work in a similar manner.
However, I have yet to choose a solution, as I still need to figure out how to do this with several different elements for each slide, in terms of number and types. For example, on the first slide, I can have 2 < a > links, and 4 < p > text tags, and 1 < button >, but on the second slide, I may have a different number of elements.
Edit 2: Here is a fiddle with the solution: https://jsfiddle.net/n0z6u07p/1/. By wrapping elements in divs, you can show/hide them depending on the image slided to in the slider.
Here is the approach I use for similar problems as yours: First hide all elements, then show the only needed (selected) one.
So the code should look like this:
HTML
...
<p class="text text1" id="text1id">This is slide 1.</p>
<p class="text text2" id="text2id">This is slide 2.</p>
...
JS:
...
var iText = 0;
var aTexts = $('p.text'), nTexts = aTexts.length;
function showText(i) {
aTexts.hide().eq(i).show();
}
showText(0);
$('.next').click(function () {
...
iText = (iText + 1) % nTexts;
showText(iText);
});
$('.prev').click(function () {
...
iText = (iText - 1 + nTexts) % nTexts;
showText(iText);
});
Fiddle
I added data to your img tags :
<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" data-index="1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" data-index="2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
<img id="slideimage3" data-index="3" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/500px-Red.svg.png" alt="Red Square">
</div>
<p class="label text1" id="text1id">This is slide 1.</p>
<p class="label text2" id="text2id" style="display: none;">This is slide 2.</p>
<p class="label text3" id="text3id" style="display: none;">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
And I made a function to show/hide your labels :
document.getElementById("outer_wrapperID").className = "outer_wrapper_show";
$('.inner_wrapper img:eq(0)').fadeIn(500);
$('#outer_wrapperID').fadeIn(500);
$('.inner_wrapper img:gt(0)').hide();
$('.next').click(function () {
$('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
toggleLabels();
});
$('.prev').click(function () {
$('.inner_wrapper img:first-child').fadeOut();
$('.inner_wrapper img:last-child').prependTo('.inner_wrapper').fadeOut();
$('.inner_wrapper img:first-child').fadeIn();
toggleLabels();
});
var toggleLabels = function () {
$("p.label").hide();
var firstIndex = $('.inner_wrapper img:first-child').data("index");
$("p.text"+firstIndex).show();
};
I am after a little help - I'm not a great programmer, and can usually find the answers to my questions with googling, but not this time!
I am trying to produce a specific effect on a webpage, and am struggling to find some basic JS I can modify/tweak to do what I need.
I am going to put a panel of 10 images, in two rows of five, across a webpage. Each image will have a 'Name' above it, and a 'Job Title' below it. When the image is clicked on, I'd like the (relevant) hidden div to display, over the top of all the images - i.e. with the top left corner matching the top left corner of the first image. The div will be a pre-set width.
In the top corner of each div I want a simple close button.
So, what I am trying to produce is code that's scalable - i.e. in theory it shouldn't matter how many images there are as long as I get the structure right, when you click on the image, it 'shows' the correct hidden div.
We already load jQuery on to the webpage, so using that would be no problem.
Any advice/links to snippets/pointers would be appreciated!
This is quite simply achieved with jQuery and jQueryUI.
For brevity I have only included 5 images here http://jsfiddle.net/8kefF/2/
HTML:
<div>
<div class="clickThisPicture" data-content-id="1">
<img src="http://placehold.it/350x150" />
</div>
<div class="clickThisPicture" data-content-id="2">
<img src="http://placehold.it/350x150" />
</div>
<div class="clickThisPicture" data-content-id="3">
<img src="http://placehold.it/350x150" />
</div>
<div class="clickThisPicture" data-content-id="4">
<img src="http://placehold.it/350x150" />
</div>
<div class="clickThisPicture" data-content-id="5">
<img src="http://placehold.it/350x150" />
</div>
</div>
<div class="hiddenContent" data-content-id="1">Hidden content 1</div>
<div class="hiddenContent" data-content-id="2">Hidden content 2</div>
<div class="hiddenContent" data-content-id="3">Hidden content 3</div>
<div class="hiddenContent" data-content-id="4">Hidden content 4</div>
<div class="hiddenContent" data-content-id="5">Hidden content 5</div>
CSS:
.hiddenContent {
display:none;
}
.clickThisPicture {
float:left;
border:1px solid #000;
}
Javascript:
$(document).ready(function () {
$('.clickThisPicture').on('click', function (event) {
var contentId = $(this).data('content-id');
$(".hiddenContent[data-content-id='" + contentId + "']").dialog({
modal: true,
resizable: false,
draggable: false,
closeOnEscape: false,
dialogClass: "no-close",
buttons: {
"Close": function () {
$(this).dialog("destroy");
}
}
});
});
});
EDIT: I updated the code to hide the default close button so as to destroy the element each time as the OP asked for scalability so having potentially 100's/1000's of extra elements in the DOM would lead to memory issues. eventually.
If I understand correctly, this jQuery plugin will help You: plainOverlay
I use a hack to justify divs in the container (marked answer). It works perfectly in static HTML.
<div id="gallery-thumbnails">
<div class="gallery-thumbnail">
<img src="1.jpg" alt="alt" title="title">
</div>
<div class="gallery-thumbnail">
<img src="2.jpg" alt="alt" title="title">
</div>
<div class="gallery-thumbnail">
<img src="3.jpg" alt="alt" title="title">
</div>
<div class="gallery-thumbnail">
<img src="4.jpg" alt="alt" title="title">
</div>
<span class="stretch"></span>
</div>
But when I do this via JS, the hack itself don't work (color styles are applied, I see pictures). Hovewer, the diff tool says that static and generated versions of DOM are identical.
Here's the code
var thumbnailsContainer = $('#gallery-thumbnails');
$(thumbnailsContainer).children('*').each(function() {
$(this).remove();
});
$(lists[index]).children('img').each(function(index, picture) {
var thumbnail = $('<div>', { class: "gallery-thumbnail" });
var thumbnailImage = $('<img>', { src: $(picture).attr('src'), alt: $(picture).attr('alt'), title: $(picture).attr('title') });
$(thumbnail).append(thumbnailImage);
$(thumbnailsContainer).append(thumbnail);
});
$(thumbnailsContainer).append($('<span>', { class: 'stretch'} ));
Update
JSFiddle is here. If you comment the JS code and re-run, you'll see what I intent to do. If you uncomment, you'll see me failin'.
The problem is that you need spaces between elements, so just add
$thumbnailsContainer.append(' ');
Demo
I have a <div> with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:
<div id="banner_slider">
<ul id="portfolio">
<li>
<img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Quddus Helal :: 01st - 2010</p>
</li>
<li>
<img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Md Moniruzzaman :: 02nd - 2010</p>
</li>
</ul>
</div>
You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:
HTML
<span id="loading" style="display:none">Loading...</span>
<div class="images">
<img class="large-image" src="http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg" width="893" height="548" />
<img class="large-image" src="http://www.pandafix.com/pandafix/images/r3387761054.jpg" width="275" height="199" />
<img class="large-image" src="http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg" width="500" height="375" />
</div>
jQuery
$(function() {
var images = $('.large-image')
, total = images.length
, count = 0;
$('#loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('#loading').hide();
}
});
});
You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/
You can use the jQuery load() function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.
Javascript
$('img#id').load(function(){
$('#loadingGif').hide();
});
HTML
<div id="loadingGif">
<img src="loading.gif" />
</div>
This is what you need:
http://jqueryfordesigners.com/image-loading/
if u loading all images via AJAX then use below way
HTML
<div id="loadingDiv"><img src="loading.gif"></div>
jQuery
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;