$('#minipics img').click(function(){
var url = $(this).attr('src');
$('#mainPic img').attr('src', url);
});
I have this little code for image gallery. I want to insert also jquery tabs under the gallery.
so I have HTML for it:
<div id="tabs">
<ul>
<li>პროდუქტის აღწერა</li>
<li>პრომო ვიდეო</li>
<li>მსგავსი პროდუქტი</li>
<li>კომენტარები (0)</li>
</ul>
<div id="tabs-1" class="ui-widget-content1">
<p>1</p>
</div>
<div id="tabs-2" class="ui-widget-content1">
<p>2</p>
</div>
<div id="tabs-3" class="ui-widget-content1">
<p>3</p>
</div>
<div id="tabs-4" class="ui-widget-content1">
<p>4</p>
</div>
</div>
also I'm inserting table ui.
when I'm inserting function:
$(function() {
$( "#tabs" ).tabs();
});
tabs work, but my gallery doesn't work. What may be a problem here?
this is gallery html:
<div id='mainPic'>
<img src="img/a1.png">
</div>
</div>
<div id='minipics'>
<img src="img/a1.png">
<img src="img/a2.png">
<img src="img/a3.png">
<img src="img/a4.png">
<img src="img/a5.png">
<img src="img/a6.png">
<img src="img/a7.png">
</div>
Not 100% sure if this is the solution but I'd recommend using a .on function instead of .click, only because I find them to work more frequently in my projects.
$('#minipics img').on( "click", function() {
var url = $(this).attr('src');
$('#mainPic img').attr('src', url);
});
Related
Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!
How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.
$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});
Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.
As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});
This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});
I was assigned to do a photo gallery.
A big picture (1000x1000) in the middle, three little thumbnails picture(200x200) below it.
I was given this useful function
getBigImg(thumbnail); // Returns big image
We assume the CSS is already given for us and we do not need to worry.
<div class="big image">
<img src="big picture"/>
</div>
<div class = "thumbnails">
<div id="placement1> img src thumbnail 1 </div>
<div id="placement2> img src thumbnail 2 </div>
<div id="placement3> img src thumbnail 3 </div>
</div>
What I did is simple create 3 copies of the .HTML and do infront of each of the thumbnails. Whenever the user click on the image it will redirects to the .html where the big image is big image of the thumbnail.
I was told I can save all this hassle by using JQuery. What are they referring to?
you can do something like this example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".galImg").click(function() {
var image = $(this).attr("rel");
$('#feature').fadeOut('slow');
$('#feature').html('<img src="' + image + '"/>');
$('#feature').fadeIn('slow');
});
});
</script>
use this HTML: little bug fixes
<div class="big image">
<img class="bigImage" src="big picture"/>
</div>
<div class="thumbnails">
<div id="placement1" > <img src="thumbnail1" /> </div>
<div id="placement2" > <img src="thumbnail2" /> </div>
<div id="placement3" > <img src="thumbnail3" /> </div>
</div>
and add this to your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '.thumbnails > div', function(){
var img = $(this).find('img').attr('src');
$('.bigImage').attr('src', img);
});
});
</script>
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this
I have a plain HTML page with various images on it, each image when clicked opens a lightbox with sharing buttons inside. I had planned to use the ID in the URL to highlight which image the like was for, but it appears that facebook and twitter strip these out.
Without having hundreds of separate lightboxes for each image, how can I have sharing specific to the image currently being viewed?
HTML Examples:
<div class="tile" id="tile-01">
<a href="#tile-01" data-name="Jo" data-title="Chartered Surveyor">
<img src="media/img01.jpg" alt="Jo" />
<p class="name">Jo - Chartered Surveyor</p>
</a>
</div>
<div class="overlay">
<div id="lightbox">
<div class="lightbox-content">
</div>
<div class="details">
<h2>Claire</h2>
<span class="job-title"></span>
<div class="social">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
Tweet
<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(function(){
var $container = $('#gallery');
$container.imagesLoaded( function() {
$container.masonry();
});
$('.tile a').click(function(){
$('.overlay').fadeIn();
$img = $(this).find('img').clone();
$('.lightbox-content').html($img)
$('#lightbox h2').text($(this).data('name'))
$('#lightbox span.job-title').text($(this).data('title'))
return true;
})
$('.overlay').click(function(){
$(this).fadeOut();
})
})
</script>