First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.
I think you are looking for this: http://isotope.metafizzy.co/
You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});
Related
how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>
Did anyone knew how a tags in the browser are indexed?
I have in my html page 12 items wich are created with a tags, the problem is that when I want to focus the first tag with
document.getElementsByTagName("a")[0].focus(); the browser don't focus the first item! and if I just want to focus the third item by document.getElementsByTagName("a")[2].focus(); it focuses the item number 5.
I am wandering why I have this problem since in my page I have only the wanted items to be focused by a tags and the other html items are div and img tags!
Thanks a lot in advance for your help and reply :)
here is an exmaple of 2 items created in my html page:
<div id="carousel_items">
<div id="indicators" class="carousel-indicators" style="visibility: visible;">
<div id="nextBtn" class="right_indicator">
<img id="indicators_right" src="images/nextbtn.gif" style="width:45px;height:25px;">
</div>
</div>
<div id="div_slides" class="thumbnailList_slides">
<div class="div_vid">
<a id="btn0" class="btn_vid" href="#" onclick="javascript:activate('0');"> </a>
</div>
<div class="div_vid">
<a id="btn1" class="btn_vid" href="#" onclick="javascript:activate('1');"> </a>
</div>
</div>
Elements are returned in the order in which they appear in the DOM.
Various things can make that order different to the order you see them when viewing from left-right and top-bottom including:
text direction
float: right
CSS positioning
Flex order
I am trying to use jquery plugin Color Box: http://www.jacklmoore.com/colorbox/
HTML:
<center>
<div class='images'>
<a class="group1" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a>
<a class="group1" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
</div>
</center>
JS:
$(".images img").colorbox({rel:'images', transition:"fade"});
When I click to image black blank screen is appearing, black box, where picture must be situadted, appearing, icon loading constanlty spinning and image is not loading. There are no any errors or messages. Only icon loading.
How I can solve this problem?
Try this code:
$(".images > .group1").colorbox({rel:'images', transition:"fade"});
Try this:
<div style="text-align:center;">
<div class='images'>
<a class="group1" rel="images" href="http://placehold.it/250x150" title="Фотография 1"><img src='http://placehold.it/250x150'></a>
<a class="group1" rel="images" href="/media/images/background.jpg"> <img src='http://placehold.it/250x150'></a>
</div>
</div>
What I did here
Added a rel attribute to the images with the value images to match your code.
Note: <center> is deprecated. Use <div style="text-align:center;"> instead.
$(".images a").colorbox({rel:'group1', transition:"fade"});
Rel should make reference to the class ("group1"), and the plugin is applied to the < a > element, not the < img > inside it
http://www.jacklmoore.com/colorbox/example3/
i tried to make pop up images in my responsive gallery, but it seems to me that highslide.js doesn't see the pop up images. Script source http://highslide.com/#installation I use bootstrap and Word Press. I see that images loading but can't appear. I spend much time but don't understand what I've done wrong. Any help will be greatly appreciated!
My site http://b.pusku.com/
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 thumbs_color">
<ul id="thumbs">
<li>
<a href="http://b.pusku.com/wp-content/uploads/2012/11/7.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
<li>
<a href="/">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="<?php bloginfo('template_url');?>/highslide/highslide.js"></script>
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
It may be that the hs.graphicsDir setting is wrong. Judging from the way you are inserting the template url in the path for the highslide.js file, my guess is that it should look like this:
hs.graphicsDir = '<?php bloginfo('template_url');?>/highslide/graphics/';
If that doesn't work, there's a FAQ item for it on the Highslide website.
I'm asking for some orientation and recommendations for developing something similar like the yahoo movies page: http://movies.yahoo.com/
I don't know how the thing at the top with the arrows and different title of movies is called but I've seen it several times.(the one that has 4 options:expendables, yogi bear, etc) I want to add something like this so I'm asking for orientation on what to look for and develop it on java script.
thanks!
Yes, that's what's called a Carousel, and there are many libraries and plugins for doing it. You might try Yahoo's own YUI Carousel Control or this one for jQuery, but there are plenty of others out there--just Google for them.
It's basically four links and four images here. When you click on the link, the associated image will be shown.
I will show you an example.
HTML:
<div class="links">
<a class="link-first" href="#">Show image 1</a>
<a class="link-second" href="#">Show image 2</a>
</div>
<div class="images">
<img class="image-first" href="#" alt="" />
<img class="image-second" href="#" alt="" />
</div>
JavaScript (jQuery):
$(".links a").click(function()
{
$(".images img").hide();
$(".images ." + this.className.split("-")[1]).show();
});