I am trying to open the pop-up when an image is clicked, rather than on button click.
How could it be done?
Its a gallery kind of thing, where the images are loaded categorically and when clicked on the image, a bpopup show up and the details of the products are shown
I tried that,
Please check the fiddle file http://jsfiddle.net/psps/NhRHC/
The problem that I am facing now is it opens up in the first image click, but not in the second image.
HTML
<img id="my-button" src="http://placehold.it/200&text=A">
<img id="my-button" src="http://placehold.it/200&text=B">
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Some text
</div>
CSS
#element_to_pop_up {
background-color:#fc0;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
JS
its in that jfiddle link.
Using jQuery, you can do it like this -
$('#div img').click(function(){ $("#popup").bPopup(); });
This statement will make the images in the container element with id "div" open up a bPopup when they are clicked.
Related
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.
A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:
HTML:
<div class="img-container">
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>
CSS:
.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}
Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML
CSS
header.site-header .wrap {
background: url(http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg) right top no-repeat;
}
This is what I am working with.
Any insight would be grateful.
Here is the home.php code.
You cannot do this using CSS.
What you've done here is just passed the URL for the background.
If you want to add a link to the image, you can do this either by using a pair of anchor tags.
EG:
Add this in your HTML :
<a href='#'>
<img src="...." />
</a>
OR by adding a click event on to the div.
EG:
$(document).ready(function(){
$('header.site-header .wrap').click(function(){
window.location.href = "Link";
});
});
You could do something simpler:
<div>
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
This creates a link that is an image.
EDIT after more info came to light.
From what I've gathered so far... you're using the "Open Floor Plan" Theme for Wordpress. (Maybe ask them for support? After all you paid for a theme.)
The simple method and recommended:
That theme appears to have a widget position at the top right. Why not use that to add your banner-link?
The hard-way hacking not-recommended method:
In wordpress you can edit the theme files (not recommended) by going to Appearance then Editor. This will open up the theme editor view and on the right side you'll see all the files of the currently active theme. You then could search those files for the HTML tag and add the above modifications.
The file that could have what you're looking for could be the header.php or index.php, but if it isn't there just sift through the other files until you find it.
The html markup would look something like this:
<header class="site-header">
<div class="wrap">
It will contain more stuff in here...
</div>
</header>
It will probably contain a lot more classes and PHP code...
The Widget Method
Add your banner code in a Text widget. You can add the CSS styling in-line, so that you won't have to upload anything else.
Add the CSS property for the parent container:
<style>header.site-header .wrap { position:relative; }
Then add the CSS for your element:
.mybanner { position:absolute; top:0; right:0; z-index:1; }
/* the widget with the social icons will probably need z-index aswell */
.CLASS-of-other-widget { position:relative; z-index:2; }
</style>
Now add your HTML code:
<div class="mybanner">
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
Please note that with the z-index, the other widget will cover the banner and the ability to click it. You could simply use another position for that widget and just have the banner there.
Hi all and thank you for the help.
I have found a solution. I left the image on the BG, then added a widget to the top right of the page where the image (banner sits), then added a text box to the widget area and added this
<div class="topbanner" onclick="window.location='http://jadeluxurycondos.com/jadeluxurycondos-new/jade-signature/'" style=" height: 102px;left: 37.5%;position: absolute;top: 0; margin-top: 32px;width: 585px;cursor: pointer;"><div>
The image appears to be clickable. Check here to see it in action.
Is it possible to have an image without watermark on my page and when people try to download the image by accessing the right click menu and "save image as". To let them download an image with the watermark applied to it?
So apparently you can check which mouse button was pressed in a mousedown event handler and if it was the right button change the source of the image:
$('img').on('mousedown', function (event) {
if (event.which == 3) {
this.src = this.src.replace('.jpg', '_watermark.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
No, this isn't possible, as you haven't any information about what is user currently doing with these images. You can, however, apply your watermark to the bottom or to the top of the image and then just hide part of an image in your html
To my knowledge, you're going to have to break the normal UX (User eXperience) to do this.
You could disable the right-click context menu and then create your own (say just for the images you want to watermark) so that when a user right-clicks an image, they are given the option to download the image but they are directed to the watermarked element instead of the non-watermarked element.
Here is the first search result from the search: "jQuery context menu"
http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
You could also remove the users ability to right-click the image by placing a transparent element over the image that does not allow the click event to reach the image. Then give the user a clearly labeled link to download the image (but of-course you just direct the user to the watermarked image).
Here is a demo of this method: http://jsfiddle.net/xAjDp/
HTML --
<div class="container">
<div class="overlay"></div>
<img src="[src]" />
</div>
Download Image
CSS --
.container {
position : relative;
display : inline-block;
/*IE7&6 Compatibility*/
*display : inline;
zoom : 1;
_height : 366px;
}
.container .overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0;
filter : alpha(opacity=0);
zoom : 1;/*give the element "hasLayout"*/
}
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.
Below is an image showing the different actions it does when clicked on.
I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?
Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Once you've done that, you can use CSS to position the tooltip and show it when necessary.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone's hovering over the button. */
display: block;
}
To show the drop-down box, you probably will need JavaScript. Add another element to the container:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:
$('#button').click(function() {
$('#selection').show();
});
You can then make your sub-items do whatever they like, as long as they also hide #selection.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Finally, you want to change the background and text colours upon hover. That's easy enough:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.
Here is the approach I would take:
For hovering check out jQuery's hover event to change the different image states
For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
For clicking, jQuery's click event will do the trick
The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.