How to change a url for the first element only? - javascript

I want to be able to change a url directory for, e.g. the first <img> in a <div>, or, any image that is not the first.
My reason is that the loading speed is too slow. That's because I used CSS to generate thumbnails from larger images. I now want to redirect those thumbnail images to a thumbnail folder with small images, rather than having to redirect them individually, which would be a pain.
<img src="images/stories/Images_for_Web/baths_windowToTheSoul_WB4_p90.jpg">
<img src="images/stories/Thumbs/baths_windowToTheSoul_WB4_p90.jpg">
here is the link to the site I'm working on: http://www.d1187169-1.cp.blacknight.com/whitebook1/
I have the CSS automatically resizing and cropping the images for any that is not the first. I like that solution as it will save work in the future so if this part could work also, it would be brilliant, unfortunately I just know CSS, HTML, a little Joomla and only starting in javascript etc., but I am willing to try anything to get this to work!
Any thoughts or suggestions much appreciated. Thanks, Paul

If you were to use jQuery, you could do the following:
$("#somediv img:first").attr("src", "images/new/location");
As you can see just one line of code thanks to the CSS-like selectors. I highly recommend using jQuery for such tasks.

Thumbnails should be generated with php/on the server side. Resizing with CSS is not really resizing - still the full image is loaded.
Maybe you should look in jQuery - it has selectors that are like CSS selectors.

Related

I want to turn off redirect to external site on my HTML5 video player embedded video

I have troubleshot my client code to this one line which seems to redirect me to external site (original URL of embedded video) upon click and I want to disable it.
I went through documentation and it looks like mhp1138 has something to do with HTML5 player, but I can't find anything on it. Also how can I find the associated html file to remove the div or make the style="display: none;"? I would have also tried to update style.css file but this uses inline style which takes precedence. Don't know how to fix at this point, any suggestions?
enter image description here
I can't comment since I don't have 50 points yet, so I'll write an answer.
Have you tried to use !important on the CSS stylesheet to override the inline style? I know this is not ideal, but might be a workaround and might help you get started somewhere, at least that way you can test if you problem could be solved through style changes.

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

automatically get the href in <a> tag from the src of an <img> tag

This probably seems like a strange question at first, but I haven't managed to find another way to solve the problem. Apologies if this is long winded, but I wanted to try and explain exactly what I'm trying to do!
Basically, I am using lightbox to display an image which when clicked, enlarges the image (this being what lightbox does..!) This is working fine, however:
What lightbox actually does is load another image - useful so you can have two files, one small (thumbnail) and one large. I could even put the same image in both locations and scale the small one using CSS/html - as I have here - the relevant piece of lightbox code is below:
<a href="image1.gif" rel="lightbox" title="Project one image">
<img src="image1.gif" width="200px" alt="small version of image" /></a>
(I understand that it is preferable to have two seperate files for loading time etc, but in this case this will not work)
But the problem I am having is that the image in the image tag needs to be able to be changed (to a completely different image), without anything else been changed - so without updating the href for the lightbox link. But the lightbox needs to show the same image as is brought up by the image tag- as it stands, both the img tag and a tag need to be changed to do this.
In this case, it will not be possible to edit the a tag - I am setting this up to allow another (fairly technophobic) person to replace the image using CushyCMS (a content editor) - this realistically only gives the ability to change the image itself, as I cannot rely on this person to also update the a tag (this is definitely not an option!)
What I need to know is, is there a way to make the image referred to in the a tag automatically be the same as that referred to in the img tag, whatever this may be at the time? From research so far I believe that jquery / javascript would be the solution here.
I've tried modifying some other javascript code that I've found, but possibly due to my own ineptitude I haven't been able to make it work.
If anyone has a solution, it would be greatly appreciated if they could also idiot-proof it for me, I've successfully used javascript that came complete with script tags, but beyond that I've had little success!
Thanks for your time reading and for any help anyone can offer!
I am still confused by this question, but i think that's what you want. The img src attribute can change from the CMS but no the a. Try this to fix it :
$(document).ready(function(){
var $a = $('a[rel=lightbox]');
$a.each(function(){
$(this).attr('href', $(this).find('img').attr('src'));
})
})

Load browser images with javascript event?

I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).
Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).
I would like a way of not loading images until they are visible on the page.
I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).
Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?
Thanks!
Maybe jQuery Tabs could do what you need, with ajax call on tabs...
How do you display your hidden divs?
One plan of attack:
Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.
As a method it's definitely got some downsides.
If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:
<img src="" data-src="/path/to/image" style="display: none" />
And then you can use Javascript to fill the src with the data-src:
$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).
I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.
Good luck! ;)
I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been...
Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...
Your only choices would be ajax on the on hand or doing something like this:
<img src="transparent.gif" alt="" rel="real image source" />
and then switch attributes when the divs become visible, so the image starts loading.
This works fine as well at least if you don't need google indexing them.
Hope that helps! :)
Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(
I was unaware of this previously, but LazyLoad does support triggering from events:
http://www.appelsiini.net/projects/lazyload
If anyone needs a hand on how I did this, let me know!

Small Image Hover Views Big Image (Not Separate Window, though)

I Want That hover on Small Image Views Big Image in same window...
So can anybody help me in dis...
First and foremost, welcome to StackOverflow!
What you're describing is not PHP. Instead, the best technology to use for your problem would be a client-side solution like Javascript. If you don't mind, I'd like to encourage you to consider using a Javascript framework to cut down on development time for various browsers (if you don't know already, they can and will drive you insane if you give them the opportunity).
Causing a thumbnail to display a larger image with Javascript isn't that difficult. Consider the following HTML:
<img src="thumb-kittens.jpg" rel="big-kittens.jpg" class="zoomMe" />
<div class="preview">...previews will be seen here</div>
I'm basically storing the larger files name in the rel tag to quickly access it via our javascript. Using jQuery, a popular javascript library, we can do a preview action rather easily:
$(function(){
// Add some events when we hover our thumbnails
$("img.zoomMe").hover(
function(){
// Add our big image inside the preview box
$(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
},
function(){
// Empty our preview box
$(".preview").html("");
}
);
});
In this simple example, we're just using the native hover method in jQuery to define two actions. The first when we mouse over any image having the class "zoomMe", and the second when we leave that same image.

Categories