I have a photographer client who has 10,000 + photo files ( jpegs ) on their site. When on the site viewing the photographs, you have to click EACH one individually and X out of it when done viewing. Another words, no lightbox that allows scrolling through the photos.
I am searching for a method or recommendation on how to "drop"/transfer/convert the existing jpeg files into a lightbox environment with out having to hand type each file indivually and place in the html structure.
Here is an example of one of his pages. You will see all the photos displayed as thumbnails. Click one and then it opens it in a lightbox. I would be open to be able to add a scroll function to the existing light box if possible
Thanks in advance.
My recommendation: Batch name all the files to some sort of pattern, like "Pic1, Pic2, Pic3" - something that can be accesed programmatically. Use your server-side language (if you're using one) to fetch the first 15 or so pictures and send them back. jQuery can then use the first 15 or so in the lightbox or whatever, and when you get past the first 15, make an Ajax call to call the next 15, etc.
You might be able to drop in a lightbox like prettyphoto and use jquery selectors to target your image links. And like tskuzzy said, if you want to be able to cycle through them from within the lightbox, you'll have to do a search and replace to add a rel attribute.
It might help if you describe how the page is currently built or have a link to it.
Depending on the structure of the current page, you could likely just do a smart find and replace. If it's a little more complicated, you could write a simple script to do the conversion for you.
EDIT:
Let's say you're current code is something along the lines of:
<ul>
<li><a class="showimage" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a class="showimage" href="pic2.jpg"><img src="pic2thumb.jpg" /></a></li>
</ul>
To put it into a lightbox environment, you'll want it to be in this format:
<ul>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
</ul>
Then you'll need to find:
class="showimage"
and replace it with
rel="lightbox"
I hope that explains it. You'll have to post a snippet of your current code/html if you want a more specific answer tailored to your needs.
it seems that your friend created his own static html website for his portfolio. I would suggest, if your friend cannot afford a custom dynamic website (PHP, asp.net, jsp), he should subscribe to any blogging site that already has these management tools available.
Related
So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>
if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS
You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.
As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>
On my HTML index page, I am using a popup javascript code that has something like
<li> <font color ="#000"> » </font> <font color ="#ccc">
Some text</font><b>, XYX, Country</b></li>
<li><font color ="#000"> » </font><a href ="secondpage.php" alt="Blog" />
I used a free xml-sitemap generator and strangely, the second li which is a regular a href URL and shows up in the sitemap as a linked page. However, the first one which calls the page using a javascript function does not show up.
This got me thinking,
Would this impact SEO results, would search engines also skip JS code and hence not crawl the linked pages which open in a popup?
Or is this an issue with the sitemap generator that does not understand JS and I have to manually create it?
Totally new to this. Was hoping to get some advise .
thanks!
Ryan
answer will vary based of crawlers, but you should keep your markup readable and less dynamic in areas you want crawler to read or you can follow the guidelines provided. For specific answer to your question:
Since 2009 Google looks for and finds OnClick links in any and all HTML tags. When found they will add the URL to their crawl.
If there is sensible "anchor" text then the text of the element will be used as anchor text.
The OnClick link also passes PageRank.
For more info:
http://www.searchenginepeople.com/blog/onclick.html
http://seogadget.com/google-does-not-crawl-hidden-java-onclick/
jsfidllde
I am trying to get the lazy load effect of social buttons through socialite.js. Everything is fine, but the +1s, likes, tweet counter is for socialite.com and not my website. For example, this code gives socialite.com a "like":
<li>
<a href="http://www.facebook.com/sharer.php?u=http://www.socialitejs.com&t=Socialite.js"
class="socialite facebook-like" data-href="http://socialitejs.com" data-send="false"
data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow"
target="_blank"><span class="vhidden">Share on Facebook</span></a>
</li>
I want it to be for my page. Manually changing http://socialitejs.com to mywebsite.com for each and every different page is too tiresome.
I believe there is a trick to do this with javascript and replacing href with expr:share_url='data:post.url', however this is not working as the code has many other attributes apart from href. Can anyone help me please. Thanks a ton.
When you add the element in which you'll invoke socialite.js:
<a class="socialite twitter-share" href="http://twitter.com/share" data-url="http://socialitejs.com">
Share on Twitter
</a>
You're supposed to replace the value at data-url for your website URL. Then the generated elements will point to your website.
If you, by mistake, already included the wrong URL in many places - and feel it's easier to correct it with JavaScript instead of doing search-and-replace in a bunch of files - then I suggest running this jQuery line before calling Socialite.load():
$('[data-url]').attr('data-url', 'mywebsite.com');
I have a home page, and I want to navigate to other pages, say blog or gallery, but without the URL in the address bar to change. I know it's possible on server side, but how to do in Javascript?
Here is my HTML/JS code:
//HTML
<ul>
<li><a onclick="openPage('contact.html')">Contact Us</a></li>
<li><a onclick="openPage('blog.html')">Blog</a></li>
<li><a onclick="openPage('gallery.html')">Gallery</a></li>
</ul>
//Javascript
function openPage(url){
// All these will forward but will change the URL
//window.open(url);
//window.location.href=url;
//self.location=url;
//window.location.replace(url);
}
Initially, the URL will be http://something.com/mainpage.html
And it should stay the same even when navigating to any page.
This is a very simple example of what I have. So, is it possible on client side without server? If not, then what would be the simplest way to do it on server side? Assuming I'm using Java/JSF.
You will have to add hash # if you want to prevent page from reloading.
The css-tricks.com has an excellent screencast on that, have a look at:
Best Practices with Dynamic Content
please check this question in stackoverflow changing-the-url-without-reloading-the-page
I will give you a hint. You can then write the code on your own.
Using ajax, fetch the entire page you want to open. (I assume that they are on the same server.)
Then parse the html.responsetext & find the body.innerHTML of the fetched page.
then use document.body.innerHTML=fetched_body_innerHTML;
Change the document.title also in similar manner.
I am assuming that both pages will have same CSS (for consistency in looks), and quite possibly, same js files loaded.
If you have different set of CSS &/or js files on the 2 pages, you will need to create additional nodes & delete old script/link nodes. (However, the result will not be identical, since old JS was already loaded & body.onload will not be triggered after you change the innerHTML of the body.
I have not been able to wrap my brain around how to call information from a link (In my domain) to populate a sidebar container that I wish to show other sources for the same information.
It would look much like a "related news", but would not be automated and instead use links that are included in code that calls it from either clicking the link (most likely), or having it loaded after the link is loaded in to an Iframe.
The site is built around CSS, but I assume I will need javascript to accomplish this task. Am I going about this the correct way or should I look at the problem from a different angle?
Here is a basic example. When you click the link the jQuery will load content.html into "xyz" div.
HTML...
<a id="abc" href="#">Load Info</a>
<div id="xyz"></div>
jQuery...
$('#abc').click(function() {
$('#xyz').load('content.html');
});
Here is a demo where I used the html() function instead but it's the same basic idea...
Demo: http://jsfiddle.net/wdm954/JBWxr/1/