i need jquery for images display like in the below URL.
http://www.yessy.com/sujatatibre/collectors.html?p=1
i didn't find any jquery in the web for that.how can i display like that?.
They don't use JavaScript. They just have two versions of each image, a small one and a large one, then they:
<a href="document-that-includes-the-large-image.html">
<img src="the-small-image.jpeg" …>
</a>
in a project where i need to show large image on click of image :-
i pass the big image reference as href of anchor who i put upon image and show them in fancybox when user click on it.
you can find out fancybox
http://fancybox.net/
the mockup someting like
<img src="small.png" alt="small image"/>
Related
I'm using WordPress and I want to include some PDF documents. I don't want to put links, I want to make a picture of it and below it to write a title, short content or anything simple that looks good.
for example like this:
or like in this link Example.
I searched for a plugin but I couldn't find one that makes this? I tried some but nothing useful? Can somebody give me any idea or any name of a plugin ? Thanks in advance :)
I'm not sure how you inserted the image on your Example link, some fancy box shortcode? You need to a link as shown below that points to your PDF file instead of the fancy-box pop-up. I don't use fancy box, do they give you an option to specify a target link for an image?
<a target="_blank" href="/path/to/downloadfile.pdf" class="image">
<img width="50" height="55" alt="" src="http://swapno-bd.org/beta/wp-content/uploads/2016/01/Trg-Rights-Entitlement.jpg">
</a>
I have this code :
<div class="images_liste_plante_solo">
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-2_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-3_miniature.jpg"/>
</div>
</div>
I will have a variable number of pictures like this, because the number of pictures depends of my PHP database. I can also echo out the directory of the fullscreen size picture and can choose what is the max size (if they are enough big to reach it) of all pictures.
So, I will need that when we click on the picture, that it enlarge it with a fullscreen gallery over the page that darken what is behind, a bit like when we want to enlarge pictures in facebook. It will only use the images with a class of "image_list_plante" and it will use my echoed link to the fullscreen image for each images (maybe this link could be echoed in an invisible div). Also, I will echo (in the invisible div) a boolean which decide if you can right click on the picture or not. I will even echo text that will be placed under or over the picture. The invisible div will be inside each "image_liste_plante" divs and after or before the picture. I can put classes to these invisibles divs if needed, etc...
How do I do that ? hard question. I know nothing about JavaScript and jQuery and others... The only things I know, it's HTML/CSS/PHP/PDO.
Do a plugin that I can modify and adapt is already built ? for the moment, I will only put a link to a .jpg file on the pictures.... but it can't stay like this too long.
*Will need to work in IE7 and other browsers too.
Finally, i used a plugin called "colorbox". It opens an iframe over the page according to it's link. The page in the iframe know which plant's images to show by using the $_GET vars from the generated link. In this iframe, i needed to code a secure database connection defined by the $_GET elements. it counts the nuber of pictures, paginate them and everything. Thanks to myself !
I'm using the JQuery prettyPhoto lightbox clone, and it works great, but I have one small issue.
All images have the following format:
<a href='imageURL' rel='prettyPhoto[gallery1]'><img src='imageURL' style='height:100px;' title='photoname' /></a>
I have 4 images showing and another 10 hidden using a <div> with style='display:none;'. Clicking any of the 4 images opens the gallery, showing all 14 photos. That's fine.
But I also need to have a link saying 'view all 14 photos' that, when clicked, opens the gallery. Now, if I don't give <a href='imageURL'> to the text link, it doesn't work. But if I link it to, for example, the first image, then that image is shown twice in the gallery. How can I avoid that?
I thought about linking the text link to one of the hidden images instead, but that's not a solution, since the 4 visible images are randomly chosen using PHP.
Change your link to:
<a id="startPrettyPhoto">View all photos</a>
And add this to the document ready where you set up prettyPhoto
$("#startPrettyPhoto").click(function() {
$("a[rel^='prettyPhoto']:first").click()
});
I'm wondering if there's some way to prompt the image dialog box through javascript or html by clicking on an image. The ultimate goal is to have the image that is clicked on be a cropped version of the uploaded image and if you'd like to change it you click on it.
EDIT: Sorry for not being more clear, this is for a web page. When I say image dialog box I mean the file upload dialog box (the one you get when you use an html form). The idea is once the image is selected in the dialog box, it begins uploading to the site so it can be displayed immediately on the page.
<IMG SRC="image url" ALT="alt text">
for action here, would be the action, for what you're attempting to do, i'd recomend using javascript
so it'd be like this (as an example)
<IMG SRC="/images/this.png" ALT="alt text">
My site links to a paypal buy it now page that loads slowly. I would like to display an animated gif after the user clicks the paypal embeded link until the new paypal page loads.
Thanks in advance.
I see that you tagged the question with jQuery, which is a great way to do it like Kerry suggested.
With jQuery this is really simple:
$("#paypalLink").click(function(){
$(".loading").show();
}
And your html would look like this
Pay with Paypal
<img src="loading.gif" class="loading" />
You'd hide the "loading" class in your css when it the page loads( perhaps with display:none;), then show it with the jquery.
There are a number of ways that you can do this, just take this as a starting point.
For the jQuery click api go here => http://api.jquery.com/click/
Use javascript so that the "onclick" event either replaces the image or adds on a new image. I suggest using jQuery's either .replaceWith('<img ...') or .append('<img ...')
In case you want to do this without JQuery...
Let's assume you have the animated image on your page hidden with CSS (display:none;)
Then on your link you would do:
Click Here
<img src="loading.gif" id="loaderimage" alt="" style="display:none;" />