Pdf thumbnail wordpress - php

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>

Related

How to reverse the order of the image gallery in FancyBox?

I'm editing a website that uses Fancybox as it's main photo gallery.
I was asked to add photos which I did by adding the photos to the main and thumbnail folders.
They show up fine except they show up at the bottom of the page after all the other pictures. I want new photos uploaded to show up on top first so they are more visible.
Basically reverse the order of all the photos. I've never used Fancybox so I'm just curious if this is easily possible Looked around but couldn't find much. Thanks.
Reverse the order of the list that you use to create the gallery. For instance you might have something that looks like:
<img src="./img1.jpg/>
<img src="./img2.jpg/>
<img src="./img3.jpg/>
<img src="./img4.jpg/>
Do this instead:
<img src="./img4.jpg/>
<img src="./img3.jpg/>
<img src="./img2.jpg/>
<img src="./img1.jpg/>

Wordpress - show link to picture instead of the actual picture

can someone tell me how i can display a link (with the title to the picture) on a wordpress page, instead of actual picture?
so the tinymce of wordpress creates after i added a picture somethin like that:
<p><img src="url" alt=""/></p>
i want just this:
<p>wp title of the pic</p>
is this possible, is there maybe a plugin? Would be great if someone can help me.
Thx

Showing HTML block on click of the preview image?

I want to show the HTML block on the click of Preview image.For this i used jquery image gallery.which works like to click on a image and show the full image but i want to show the HTML block instead of full image.
The gallary works like this:
<img src="thum.png">
and i want to use this like:
<img src="preview.png">
May be i am doing wrong in above code of line.so guys please suggest me how can i do this.
Thanks In advance.
I used this jquery image gallery this
Please use Jquery load()
Example : $('#preview-page').load('preview.html');
Now style your " Preview-page " layout based upon your wish. Have a great day :)
It looks like it requires that you add some class to it. Check out the examples. That might give you a better idea. You really should have done a bit more research before posting this though, as I found that quite quickly.

Make "save image as" link to a different image?

I'm trying to protect images with a watermark, but I don't want to display the images on the website with the watermark. I created a php script that dynamically watermarks an image on the fly, but here's what I'd like to do with it:
I'd like for whenever someone right clicks and presses "save as" an image displayed on my website for it link to a different image that is watermarked. Is that possible? Should I go about this another way?
Any response in the right direction is greatly appreciated.
Here's an example: http://fatpita.net/?i=14453
When you save this image, the saved image is watermarked, but the website's image is not... I think they actually just mask the watermark on the website though.
Thanks!
What you are trying to achieve is not possible in a safe way.
If the browser gets the unwatermarked file the user can save that file - maybe not using "save image as" but e.g. through Firefox's "page info dialog which contains a full media list.
You can't do anything that the user can't fake. The site you mentioned doesn't either - the watermark is always there.
Look at the actual source:
<div style="position:relative;width:768px;margin:9px auto 0;">
<a href="http://fatpita.net/?i=4011" id="image">
click on the image for another random funny picture<br>
<img src="images/image (14453).jpg?4011">
</a>
<div id="jpgCover">
</div>
</div>
They are actually covering over the watermark in HTML. It is still there, but there is a div in the way making sure you can't see it.
Remember the user can always remove this watermark by an easy crop.

Image display using jquery

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"/>

Categories