I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )
Related
I recently learnt html, css, javascript, node js. I'm trying to create a blog website as part of the personal project. I want to know as in Wordpress, you can add a block for an image, resize the image and then post it, how to make this functionality as part of my admin page where I can chose to resize image before uploading it.I want to know how to achieve this functionality. I researched on my own and sadly couldn't get anywhere :(
The Wordpress Documentation itself tells the wordpress users that there is the plugin 'Advanced Custom Fields' for adding new meta fields to your wordpress posts, pages, taxonomies or whatever you like. There is a huge selection of available fields.
ACF Plugin : https://www.advancedcustomfields.com/
You can use ACF (advanced custom fields) to create a new image block for your post. There also is a crop image field. You can define which image size you would like to have, and on upload, it automatically opens the image crop. Here is the plugin link:
https://wordpress.org/plugins/acf-image-aspect-ratio-crop/
Before you can create your custom image size with putting something like this in your functions.php :
https://developer.wordpress.org/reference/functions/add_image_size/
So you can create your image size and add an image block to your posts or whatever which opens a crop overlay, so you can easily have your images cropped in the size you like.
If you want to get your ACF meta fields via the Rest-API, i.e. you are using a javascript framework in the frontend, you can also just add all your ACF fields to the rest api:
https://wordpress.org/plugins/acf-to-rest-api/
Hope this helps solving your issue.
I like how Lightbox does that overlay window that displays the full size image link. Is there a way to load an html file like that? I would like to have pictures, text, maybe an embedded youtube video too all able to load in that "Virtual Window", Vertical scrolling would be nice too. I would like to avoid jquery or other things like that. Like just Java, html, and css would be nice. But if that isn't possible I can handle calling the jquery if need be.
Thanks in advance to all you savvy people!
Eva
Recently, I've spent a lot of time trying to find nice no-jQuery lightbox. And I only needed to display images, not videos or HTML. My searches failed so in the end I had to give up and include jQuery in my site.
Once you give up have a look at Jquery Colorbox.
It has directly implemented display of images, YouTube or other videos as well as dynamically loaded HTML. See their examples.
Unfortunatelly, this library requires JQuery
I'm currently building a 6 page site and have finished the template for the navigation elements, the problem is, I just put the css & js into external files for the elements that will be the same on each page but now they aren't rendering on the original page or the new page, just showing white where there should be images.
Is this because I used id's on the elements instead of classes?
I thought it wouldn't matter if the id's were on separate pages that's why I'm asking here as it could be something else.
After putting the CSS & JS into external files Dreamweaver asked if I would like to update the links, I answered yes and it changed all background images in the external css file from (images/image.jpg) to (file:///images/image.jpg), I had to change them all back to the original path. Problem solved.
It does not matter if id's are on sepereate pages. You probably have a JS error somewhere in your migration. Did you load the page with firebug/chromedevelopertools/iedevelopertools open and see if there is a JS error?
ID are not the problem. check that the relative path is still correct according to the css file. to me that seems to be the most probable mistake.
I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container
Hi I want to find a module or a js script to embed to drupal that can show me all the images uploaded to a node (CCK fields as images) and when I click on one to load that image as the highlighted one (big picture) just like in the following layout.
Can anyone tell me if such a module exist?
or
an image has to be loaded by default
I believe the Fancy Slide module can do what you're looking for. If not, there are other Rotator/Slideshow modules that may.