simple jquery slider menu - javascript

I am trying to achieve a simple menu slider that works like this:
$(document).ready(function() {
// hide slider images on page load \\
$('.sImage1, .sImage2,.sImage3, .sImage4').hide();
// slide sImage1 on page load\\
$('.sImage1').delay(500).slideDown(1000);
// provide slider image click functionallity \\
$('.sOpen1').click(function() {
// close any already open images \\
$('.sImage2, .sImage3, .sImage4').slideUp(500);
// open/close sImage1 \\
$('.sImage1').stop().slideToggle(500);
}); //end click 1
$('.sOpen2').click(function() {
$('.sImage1, .sImage3, .sImage4').slideUp(500);
$('.sImage2').stop().slideToggle(500);
}); //end click 2
$('.sOpen3').click(function() {
$('.sImage1, .sImage2, .sImage4').slideUp(500);
$('.sImage3').stop().slideToggle(500);
}); //end click 3
$('.sOpen4').click(function() {
$('.sImage1, .sImage2, .sImage3').slideUp(500);
$('.sImage4').stop().slideToggle(500);
}); //end click 4
}); // end ready
html:
<div id="menuSlider">
<ul>
<li class="sOpen1">Course Information</li>
<li class="sImage1"><img src="#" /></li>
<li class="sOpen2">Membership</li>
<li class="sImage2"><img src="#" /></li>
<li class="sOpen3">Equipment</li>
<li class="sImage3"><img src="#" /></li>
<li class="sOpen4">Golf Lessons</li>
<li class="sImage4"><img src="#" /></li>
</ul>
</div>
At the moment I only have 4 images to display but it could become 10 or more and so im guessing there is an easier way of achieving the same without so many lines of code?
I'm still learning javascript and jquery, but if some could point me in the direction of a good tutorial on how to achieve the same using an array or similar, it would be much appreciated.

You could reduce this to :
$(document).ready(function() {
$('.sImage').hide();
$('.sImage:first').delay(500).slideDown(1000); //slide down the first image
$('.sOpen').click(function() { //register the handler for .sOpen as a common click event
$('.sImage')
.not(
$(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
).slideUp(500);
});
});
changing your markup: (Remove the indexes on the classes for the trigger as well as the content li elements)
<div id="menuSlider">
<ul>
<li class="sOpen">Course Information</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Membership</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Equipment</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Golf Lessons</li>
<li class="sImage"><img src="#" /></li>
</ul>
</div>
With this you can add as many number of new items without changing/adding new classnames, handlers etc.
Demo
See
.next()
.not()

try looking here:
www.w3schools.com/jquery/jquery_animate.asp
www.w3schools.com/css3/css3_animations.asp

Perhaps even easier would be, if you simply use jQuery's UI Accordion.
Then you could have simply:
$(function () {
$("#menuSlider").accordion();
});
and then (using h and div tags):
<div id="menuSlider">
<h3>Course Information</h3>
<div>
<img src="#" />
</div>
<h3>Membership</h3>
<div>
<img src="#" />
</div>
<h3>Equipment</h3>
<div>
<img src="#" />
</div>
<h3>Golf Lessons</h3>
<div>
<img src="#" />
</div>
</div>

Related

Mouseover product gallery

I want to create product list page and mouseover gallery like [this page][1]
I tried with vertical carousel like that Fiddle
But it is not working like Zalando and jcarousel is not working 1.9.1+ jQuery version. I need a structure that works like Zalando.
Here we are! I've encapsulated your entire product (lets call it .product-item) in a <div> so when hovering the main image (or the other options when visible) you can toggle the visibility of the options:
Make the options hidden by default (CSS):
#name-carousel {
float: left;
display: none;
}
Encapsulate your product in a container (HTML):
<div class="product-item"> <!-- This is the container -->
<div id="name-carousel" class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li>
<li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li>
<li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li>
<li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li>
<li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li>
</ul>
</div>
<div class="bigProductimage">
<img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0">
</div>
</div>
Toggle the options visibility when hovering (jQuery):
productItem.hover(function() {
$("#name-carousel").fadeToggle();
});
Here is the updated fiddle for you: http://jsfiddle.net/CliffBurton/6svy9ocy/3/

J Carousel Bullet Controls

I am trying to input the bullet function on my JCarousel. All banners are appearing back-end, but when trying to navigate the banners using the bullet function does not work. The bullets are visible but are inactive. Any idea on the function code to rectify this and enable the buttons to function to allow me to click on different banners? Or even a point in the right direction?
<div class="banners">
<div class="pager jcarousel-control"><a class="jcarousel-next" href="#">1</a>23</div>
<div class="holder">
<div class="slider">
<ul>
<li><img src="{{media url="wysiwyg/Banners/Fluke-Fibre-Process.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Banners/Dymo_XTL_Banner.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"}}" alt="" /></li>
</ul>
</div>
</div>
</div>
Please provide a Fiddle so that we can assist.
In the meantime try;
(function ($) {
$(function () {
$('.jcarousel').jcarousel();
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
As used on the official example here: http://sorgalla.com/jcarousel/examples/basic/#4

How to change image and link with data values in Javascript?

I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.
This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});
look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});

how to set image dynamically to li tag using jquery

i have jquery slider. this slider has images and thumb nails of those images. i would like to replace images and thumbnails respectively which comes from jquery ajax call.
this is my slider code:
<ul id="thumbs" class="slides">
<li id="firstthumb" data-thumb="images/s/img8.jpg">
<img id="firstimage" src="images/s/img8.jpg" />
</li>
<li id="secondthumb" data-thumb="images/s/img10.jpg">
<img id="secondimage" src="images/s/img10.jpg" />
</li>
<li id="thirdthumb" data-thumb="images/s/img9.jpg">
<img id="thirdimage" src="images/s/img9.jpg" />
</li>
<li id="fourththumb" data-thumb="images/s/img11.jpg">
<img id="fourthimage" src="images/s/img11.jpg" />
</li>
<li id="fifththumb" data-thumb="images/s/img3.jpg">
<img id="fifthimage" src="images/s/img3.jpg" />
</li>
</ul>
I have replaced images with following code:
$('#firstimage').attr('src', message[22]);
$('#secondimage').attr('src', message[23]);
$('#thirdimage').attr('src', message[24]);
$('#fourthimage').attr('src', message[25]);
$('#fifthimage').attr('src', message[26]);
here message[22]... are urls of images. its working perfectly. but i don't know how to replace thumb nails images. give me some idea. thank you.
Can you try this,
$('#firstimage').attr('src', message[22]).data('thumb', message[22]);
Try this
$('#firstthumb').data('thumb', message[22]);
OR
$('#firstthumb').attr('data-thumb',message[22]);

item changing with fade in/out (jQuery)

I want to create a menu in my web page, where each list item is represented by image. When mouse point at some of these images, this image should fade out and be replaced by another image (I think fadeIn() would be useful).
HTML code:
<ul id="buttons">`
<li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">
<img src="button01.png" id="button01_1" />
<img src="button01_hover.png" id="button01_2"/>
</a></li>
<li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">
<img src="button02.png" id="button02_1" />
<img src="button02_hover.png" id="button02_2"/>
</a></li>
</ul>
jQuery - I´m new in using jQuery, I tried this, but there are many mistakes. Pictures are not changing properly - "fadeIn" picture changes position (every list item is absolutely positioned), and first image is disapperaing and appearing constantly. Here´s the code:
function change(i)
{
switch(i)
{
case 1:
$("#button01_1").fadeOut(500);
$("#button01_2").fadeIn(500);
break;
case 2:
$("#button02_1").fadeOut(500);
$("#button02_2").fadeIn(500);
}
}
(ret(i) is similar..)
Thanks for help..
You're nearly there but i can simplify:
<ul id="buttons">
<li>
<a href="#" id="link1">
<img src="button01.png" id="button01_1" />
</a>
</li>
<li>
<a href="#" id="link2">
<img src="button02.png" id="button02_1" />
</a>
</li>
</ul>
jQuery code:
$('#link1').hover(function(){
$('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
$('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});
With the selectors you could remove the id button01_1 and replace the jQuery selector to $('img','#link') to accommodate.
sorry if I've used too much of the jQuery library than javascript.
Function explained:
$('#link1').hover(function(){ --initial function on hover-- },function(){ --coming out of the hover-- });
EDIT :
jQuery library : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Add the library to your html page
I think the problem is the fact that fading out an image also triggers a mouseout, (since it has display:none once the fade out completes), which in turn triggers a fade in, and so on. Consider rethinking your logic.
Updated:
use like this :
<ul id="buttons">
<li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">
<img src="button01.png"/>
</a></li>
<li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">
<img src="button02.png"/>
</a></li>
</ul>
jquery :
function change(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
});
}
function ret(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'.png').fadeIn('2000');
});
}
I hope that work ...

Categories

Resources