I am using the LightBox2 component on my website to display the gallery images in a grouped lightbox. I add images to the website by using the Image component and adding all the images to the Photos book. However, images can still be viewed separately on a page, if I so choose. The url would then look something like this: www.myurl.com/node/37 with body content (that I added in the Create Image process) displaying beneath the image.
I was wondering if I can get this body content of this new image node page to display as the title for the Lightbox when it opens, if a user clicks on an image in the gallery.
TIA
It seems impossible without hacking the Lightbox2 module.
If you modify Image Gallery's view to include image's body field, you'll be able to hack lightbox2\js\auto_image_handling.js to take body as title.
yes, write a function that prints the html you want to show, register the function with hook_menu, then call it. voila.
e.g.
function mymodule_menu() {
$items['lightboxhtml'] = array(
'page callback' => 'mymodule_html4lightbox',
'page arguments' => array(1),
...
}
function mymodule_html4lightbox($nid) {
$node = node_load($nid);
print $node->body;
exit;
}
in the that calls lightbox, call it with /lightboxhtml/$nid as the href.
Related
I'm working on a gatsby-react project that has multiple pages. On the header & footer there are links to other pages within my project. When I click on the link, the URL changes, the browser loads the new page and renders it normally.
The only problem is that the new page isn't loaded from the top. For example, if I'm currently viewing the bottom of the page and I click a link, then I expect to be taken to the top of the new page. What happens is I am taken to the new page, but I stay at the bottom. This image should explain what I mean.
I'm NOT using GatsbyLinks as they cause problems in the project, I use normal <a> tags for links instead.
Can I add anything to the <a> tag that can force going to the top of the page? If not then is there some other linking component I can use?
Thanks in advance!
The process of scroll restoration is handled automatically by Gatsby, however, using anchor links (<a>) for internal navigation (outside the scope of React) may lead to this kind of issue, since the data of the page it's cached but you are not using internal navigation to manage or restore it.
That said, I would suggest using the useScrollRestoration hook when needed:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
For a more global approach, you can also play with gatsby-browser.js APIs such as onRouteUpdate and shouldUpdateScroll, both triggered in each change of page (navigation):
exports.onRouteUpdate = () => {
if (typeof window !== `undefined`) { window.scrollTo(0, 0)}
}
exports.shouldUpdateScroll = args => {
return false;
};
By default, shouldUpdateScroll gets the last scrolled position, ideally, just changing and returning false it should work for your described scenario.
i want to show some animation like my websites title and logo whenever the home page is requested i.e.., to show some animation images whenever the website is requested before showing the actual content
You can use state that is set to false by default, like pageIsLoaded = false then change it to true once the page is loaded.
And do some logic like:
if (!pageIsLoaded) {
*do something..*
} else {
*do something..*
}
Use this reference: https://v2.vuejs.org/v2/guide/state-management.html
I created my event pages with a different website. That website generated an html page for me(with Javascript, CSS hosted at their end) each time I created an event. I would like to embed the event pages into my website. In order to achieve, I tried to create a blank page template like below:
<?php
/**
* Template Name: Blank
*
*/
if (have_posts()) {
while (have_posts()) { the_post();
the_content();
}
}
?>
Then pasted the content (including head and body) into WYSIWYG editor. However, WordPress pushes everything into body. How can I create a pure blank page template and have the ability to edit everything with WYSIWYG?
Not quite sure if this is the best way to solve your problem. If I understand correctly you want to include events from website X in a page on website Y?
Assuming you set up events as a custom post type, you could use an 'event' RSS feed on website X: http://www.website-x/feed/?post_type=event
Then, on website Y reed the feed using:
$content = file_get_contents('http://www.wesite-x/feed/?post_type=event');
$x = new SimpleXmlElement($content);
foreach($x->channel->item as $entry)
{
$title = $entry->title;
//ETC...
}
It's not wysiwyg but it well get you all the content you need, and you can do whatever you want with it.
Hope this helps.
I have a class name 'MonthReport.class.php' and its structure like the following:
class MonthReport{
.....
//some member variables
public function pieChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function lineChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function render html(){
$html.=str1<<<
.....
//some html code
str1;
$html.=<<<str2
<img src="$this->pieChart()" /> //can not work
str2;
}
}
when I call the pieChart() function with this in the place src it will overwrites my entire page and just shows the image.how can I do this?
I try to render the image in a separate page but the image need some specified user data eg.'userId'.in others words when i new a object, it specify the userId,so I can not render the image in a separate page.
sorry for my bad english!but I need your help!thanks in advancd!
Your question is a little unclear but if your problem is what I am assuming it to be, then I used to have similar issues (Graphic created that is just an image with all of the rest of my page content not displaying). My solution was to generate a temporary image using pchart then embed that file in the html
$myfilename = "temp_image.png"; // temp file name
$myPicture = new pImage(700,500,$myData);
// other image creation code....
$myPicture->Render($myfilename); // generate image "temp_image.png"
$image_html = '<img src="' . $myfilename . '">'; //generate the link
print("$htmlline");
Again there is some guesswork going on here as your question is unclear. The above works for me though and enables me to embed an image created on the fly by pChart into my php pages.
I have a ruby on rails web app, and in some views i have many heavy images( <img> ) to render .The <img> are generated in a Helper.
The problem is that the css is loaded first, then the js, then the heavy images , and then finally the css refereneced background images.
It takes quite a while for all of the heavy images to load, which therefore holds the whole site up.
I want to load first the css background images then load the other images, as they obviously hold visual structure of the page.
rails version: 2.3.8
EDIT:
Thank you guys, I apologize for not having shared the code earlier.
I have two models : Categories and Images, each Category has many images.
In the view i have a list of categories, which is generated by a helper :
categories.each do |cat|
html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end
and when I click on the category the images are displayed
categories_images.each do |i|
html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
end
I have css background image associated to the list of category
The problem is that the images (<img>) is displayed before the css background images of the list of categories.
We need to assume things because you haven't shared your code.
Coming to your query, for now you can preload images using jQuery:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
This saves the loading time of loading images.
Use a base64 string.
Example:
background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
without: **
online converter: http://webcodertools.com/imagetobase64converter
note: I only would suggest this if the image size is not too heavy.
Solution: Do not use the img tag.
Create a sprite containing all your images. Load the sprite in your application.html layout once.
Use data uris to transmit the data directly in the html. See http://css-tricks.com/data-uris/
My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.
<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />
<!-- the following would be in your js file -->
$lazy = $('img.lazy');
$(window).load(function(){
// window load will wait for all page elements to load, including css backgrounds
$lazy.each(function(){
// run thru each img.lazy on the page. spare the jquery calls by making $this a variable
$this = $(this);
// if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
});
});