I had a problem with Plone and Fancybox not playing nicely on News Items. So, for News Items, the image is uploaded directly with the content item and is stored at http://yoursite.com/the-news-item/image. The image is displayed with a default link to /the-news-item/image_view_fullscreen.
I have Fancybox working on most other images fine, but couldn't get the .js to work with this image. My .js call looked like:
<script type="text/javascript">
$(document).ready(function() {
/* Simple image gallery. Uses default settings */
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='/image']").attr('rel', 'gallery').fancybox();
});
</script>
And I changed the default link to /the-news-item/image. With this method, the link remained as just a static link that opened up the image in a new page.
Nachtigall's proposal works, if the link hasn't been customized.
As you have customized it to '/image', add that to your href-selector-chain and additionally tell fancybox which MIME-Type it is dealing with, by applying the class 'fancybox.image' to the link in the news-item's template.
Quoting the docs:
"Script uses the href or data-fancybox-href attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc)"
Related
I'm trying to use tag manager to inject jquery on a site in order to make an image in the header link to a specific page on the site. The code is working almost completely across the board, but not 100% (seems odd to me).
The image:
<img class="img-responsive margin-auto" src="/assets/misc/12345/image.png" alt="example" aria-label="example">
The JQuery:
<script type="text/javascript" id="img-link">
$(document).ready(function() {
$("img[src*='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
});
</script>
The image is a direct child of a div for mobile screen sizes and a list item for desktop screens (dealing with website platform here, which is the reason for tag manager.) what am I doing wrong?
Edit: the image is not clickable after the first visit to a certain page of the site (but works as expected on all other pages). unfortunately, due to me having to do this as a workaround the platform that this website is on, a minimal, complete, and verifiable example isn't really feasible.
If I understand what you are trying to do correctly it is to append an image to an anchor tag. You should give the anchor tag an Id: <a id="someId" href='example.com/image-related-page.html'></a> set a variable var img = $("<img>"); img.attr("src", "image.png"); and then with jQuery you could say $("#someId").append(img)
Try this:
$("img[src$='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
replaced * with $ according to Attribute Ends With Selector [name$=”value”]
I'm trying to create the following gallery:
- One large image
- Thumbnails of gallery images below
- Large image should open all images on click in a lightbox gallery
I have the lightbox gallery working using PhotoSwipe and it fires when I click the large image. I also have the thumbnails in place below the large image. My question now is how do I change the large image when I click one of the thumbnails? I've seen a lot of examples (also quite simple ones), but none of them seem to work in my case.
Here's the code that I have for the thumbnail:
<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0">
<img src="<?php echo $image['url']?>">
</a>
What I want is that when I click the href of the thumbnail that it changes the big image, which is display with this code:
<img class="bigimg" src="imageurl.jpg">
The thumbnail needs to have the href tag because this is required for the lightbox function to work.
I've seen some jQuery examples that replace the src of the bigimg with the src of the thumbnail, but I can't quite get it to work with the href also in place.
For reference,
this is the situation.
Example: JSFiddle
Try,
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
$('.thumbnailLink').click(function() {
$('.big a').attr('href', $(this).attr('href'));
$('.bigimg').attr('src', $(this).attr('href'));
});
here is the fiddle https://jsfiddle.net/91oq8ja2/2/
Is this what you are looking for?
I'm not intimately familiar with lightbox, but if I understand you correctly, you want it to just do what it's already doing, but in addition, change the src of your img.bigimg. If that's the case, it should work to add your own listener on the a tag as long as you don't prevent the default action. Something along the lines of this:
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
thumbnailLinks.on('click', function() {
$('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked.
});
There may be some weaknesses to this. For example I'm not sure if this will work if a user tabs through links and activates it using the enter key, though it should be possible to add other events than just click to help with that. This is also untested code at the moment, but have a go and see if it works for you.
I'm trying to customise the default functionality of the Wordpress media uploader. All I want to do is access the caption meta data for each image and overlay it on the thumbnail.
I've looked through the output and cant see where the image metadata is saved so i'm assuming it's AJAXed in on selection.
I've read a few articles about creating custom modals using wp.media() which i have got to work but i specifically need to hook into the default modal and then loop through each image, access meta data and then append this to the thumbnail.
Just a pointer on how to access the metadata when first opening the modal would be very helpful
EDIT+++
If i use the following code, when i select an image i can access all of the data i require
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
});
I need the same output but from within _media.on('open'...) so i can loop through all images and access their metadata from within the modal
EDIT 2+++
So when the modal is opened, an AJAX request is sent which returns a JSON array of the meta data for the currently loaded images. The order isn't the same as the image order in the modal but this is promising. When you scroll, another request is sent andmore images are loaded, with metadata in another JSON array
I have used wp_prepare_attachment_for_js before for something similar from what I recall.
This will allow you to access the caption for your images which seems to be what you are looking for (I hope). You can find out more about it here in the Codex
Just use attachment.caption, for example if you want to grab the caption and put it as the value of a field:
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
$('#field').val(attachment.caption);
});
You may see this webmaster-source.com article for further reference.
I'm working on designing an interactive university campus map and need some direction with what I am looking to do.
Link to page: http://www.torontoclassfind.com/startpage.html
I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.
I could do that with the following:
$("#buildinglink1").click(function () {
$("#buildingimg1").attr("src","highlightedimage.gif")
})
Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.
The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.
I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.
Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.
Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.
I think you're asking to do something like this:
$(".any-building").click(function () {
//replace all building sources with the unhighlighted version
$(".any-building").attr('src', function () {
return $(this).attr('src').replace('buildingc', 'building');
});
//replace clicked image with highlighted one
$(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});
A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.
A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.
You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .
Example:
var $mainImage=$('#mainImage')
var $buildingLinks=$('.buildingliststyle a').click(function(){
/* "this" is the link clicked*/
/* get index of this link in the whole collection of links*/
var index=$buildingLinks.index(this);
/* perhaps all the image urls are stored in an array*/
var imgUrl= imagesArray( index);
/* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
var imgUrl=$(this).data('image');
/* store the current image on display (not clear how page is supposed to work)*/
var currImage=$mainImage.attr('src');
$mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
/* nw update main image*/
$mainImage.attr('src', imgUrl);
/* load ajax content for this link*/
$('#ajaxContainer').load( $(this).attr('href') );
/* avoid browser following link*/
return false;
});
/* button to reset main image from data we already stored*/
$('#imageResetButton').click(function(){
$mainImage.attr('src', $mainImage.data('lastImage') );
})
Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID
Code above mentions potentially storing image url in data attribute such as:
Building name
I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.
I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...
Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});
You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.
You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.
If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.
How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>
You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.