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/>
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'm making a flash game portal I've figured out how to upload files With php and how to display them with the object tag in HTML but I need to know how to let the user upload thumb nails and have those thumb nails lead to the game.
I looked everywhere but all I can find is image gallery's that can't be modified to to what I want
I'm unsure of how you list these items, but it sounds like you want to make an HTML link using an image as the link.
<img src="img target">
would create a link image.
Im wondering if it is possible to overlap 2 images using CakePHP. What Im trying to do here is make default image (a pin drop in googlemap) with a head and an anchor. If the user uploads an images, it will put the uploaded image in the head of the pin drop. Any help is appreciated.
What Ive done so far is display the uploaded image in the google map but it replaces the whole pin drop.
It needs a solution using simply CSS z-index property. PHP has nothing to do with the style you want to apply.
Use the following syntax-
<img src="img1.jpg" style="z-index:1; position:absolute;" width=200 height=200>
<img src="img2.jpg" style="z-index:2; position:absolute;" width=100 height=100>
Here img2.jpg will appear above img1.jpg. The higher the z-index value the more outer the element will appear.
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 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"/>