I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.
No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?
<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
<a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
thumb.jpg'/></a>
<a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img
src='images/motorbike-girl-thumb.jpg'/></a>
<a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img
src='images/yamaha.jpg'/></a>
</div>
function gallery(change) {
document.getElementById('viewer').src = change.href;
}
The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to.
So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.
cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).
Related
I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.
The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
i'm not great with Javascript and jquery etc.
Using http://odyniec.net/projects/imgareaselect/ and a CSS popup, i'm trying to create a file upload that you can crop the image by choosing your selection with and then cancel or continue to upload the file.
I've got the popup opening with the image inside and you can crop the part of the image you want. My issue at the moment is that when you click on the "Cancel" button, the crop highlight still remains. How would I go about getting that to close too?
I've tried numerous things, checking to see if it can hide the div if the other div is pressed, or hidden, or not visible, and I just can't seem to get anything to work.
Here is my jsbin, the upload part isn't working though, so you can't actually see the error on there.
http://jsbin.com/eKaNupU/1
Thanks in advance for any help!
UPDATE:
Working (up until it doesn't!) example: http://www.costapass.es/imageupload/
Looks like you need to do cancelSelection() (see: http://odyniec.net/projects/imgareaselect/usage.html).
In order to get access that method you need to get a reference to your imgAreaSelect object. To do that, put the following in your <head> (or similar).
var ias = null;
$(document).ready(function() {
ias = $('#uploadPreview').imgAreaSelect({ instance: true });
});
Then modify your close button to be:
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
Cancel
<img id="uploadPreview" style="display:none;"/>
</div>
Your modified jsbin: http://jsbin.com/eKaNupU/11/edit
I have an img tag as(which of course is not of the exact syntax)
<img src="http://localhost/img/img_1.png" id=1 onclick="say_hi(id)" href="/img_page_1/" alt="Aim Pic" width="230" height= "164" />
what i need here is when user left clicks on img, i need onClick to be triggered and when user right clicks on it, it must act like a general href showing option ("open in new window" etc)
why i need it is, i want to show the page preview related to image with in the home page by bluring rest of page(ajax is used here to load preview of image page in say_hi function) and when user right clicks on it i want it to feel like a normal href so that he can directly open the page in other tab rather than a preview.
EDIT:
In simple terms i want to state/write/give a link to some image which acts normally as a link when right clicked(showing the context menu which has all the options for a link) but it must trigger a onClick event(or run a function in javascript) when left clicked.
Thank you.
Removed previous answer in reply to question edit.
The new edit is much simpler, see the following (using inline-JavaScript as an example - it's bad practice and shouldn't be used in any production code - see here and here for more info.):
HTML/Inline-JS:
<a href="/img_page_1/" onclick="left_click(id)">
<img src="http://localhost/img/img_1.png">
</a>
Firstly, href isn't a valid attribute on images - give it to an anchor (<a>), which you can then wrap around the image.
Only the left-click will trigger your function, right click still has default behaviour.
Function:
function left_click(id) {
event.preventDefault(); // Prevents the default anchor action.
// Rest of your function here.
}
Here we prevent the default behaviour triggered by the anchor - stopping the link from taking you to a different page.
jsFiddle example.
You need to differentiate between mouse buttons through the button member of the event object:
var left, right;
left = mie ? 1 : 0;
right = 2;
var clickHandler = function (e){
if(e.button === left){
// do onClick stuff and return
}
else if(e.button === right){
// show your context menu
}
}, false);
But this does look like you could simply have your link as description if I'm not misunderstanding what you want to do.
I have a link
Text
when i click this link my page alway scroll up to the top. How do i manage it that when i clik this link my page not scroll up to the top.
Javascript? or something
thank you
you can add some javascript to deny the default behavior.
function myClickHandler(e) {
// your code here
// ...
// new code
if(e.preventDefault){ //firefox,chrome
e.preventDefault();
}
else { // ie
return false;
}
}
if you provide some more detail/example code, we can give you a more specific answer.
Not sure what you are trying to do, but maybe you are thinking of:
<a href="JavaScript:void(0);" >Text</a>
that'll do nothing.
You might want to post an example of a link that does this. My guess is that it's because you don't have an href set for the link or you ended the link href with a "#someId"
It's not that it's scrolling to the top of the page, it's refreshing the page.
An example of a top link:
Some Link
Somewhere <!-- will refresh and you end up at the top -->
EDIT
Ah... Now that you've provided the link... it's the Hash # that's the problem.
To avoid that from happening ( I'm guessing you want to do some Javascript on the link and you're trying to get it to do something.. ) then you need return false; in your javascript. This will return false from the link and won't follow it.
It is because you have only the hash # as "URL". It makes the browser jump to the top of the page (normally it would jump to the element with the corresponding ID if you specify any).
But what is the purpose of such a link if you don't use it?
The [relative] URL # is treated by browsers as the top of the page. Either change the link's href attribute to refer to another resource, or add a click event handler that prevents the default action. Better yet, if you intend it to be a button that triggers a click event, replace the <a> tag with a <button> which is more semantically correct anyway.
<body>
<h1 id="top">First Headline</h1>
<!-- your document here-->
go to Top
</body>
With Javascript you could add some smoothness like slowly scroll up. HTML Links