Ok so I am utilizing a slimbox with an image map by including this on my main page html:
<script type="text/javascript">
jQuery(function($) {
$("#MapId area").slimbox();
});
</script>
and this is working fine, it now loads the different image map locations in slimbox when clicked.
What I need now however, is a piece of code I used before with the "rel" attribute that basically placed a download link in the "title" but grabbing the .href name and replacing the end portion of the name with _lg.jpg to give a high res image download. This worked great with the "rel" option, however I am not able to get it working for the image map "area" use instead. Here is the code as it works with the "rel" portion:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, function(el) {
return [el.href, el.title + '<br /> Download this image in Hi-Res'];
}, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
As you can see slimbox was grabbing the href link and amending it with the _lg.jpg extension and placing a link for the user in the title.
In theory, this same code should work if I just changed the jQuery(function($) {
$("a[rel^='lightbox']").slimbox() to jQuery(function($) {
$("#MapId area").slimbox() and left the rest of the code the same to place a link in the title.
However I have tried a few variations of this and none of it has worked..
Any ideas? Thanks in advance!
Ok I figured this out for anyone else who may be wanting to utilize code that will:
A) allow you to place a link to the slimbox image in the title of each lightbox without adding a ton of code to each. All you have to do is use the provided code and then place your image you want to link to in the same folder as the lightbox image and add "_lg.jpg" to the title of the linked image and the code tells it to link to the one named "_lg.jpg".
and then
B) allows you to use an image map to activate the slimbox, not just individual images, by placing $("#map area").slimbox() where #map is whatever your map id value is and the area portion tells it to activate upon the map area being pressed as opposed to your usual rel tag.
You can always still use the jQuery(function($) {$("a[rel^='lightbox']").slimbox() tag instead of you don't need the image map part, but still want to use the download link in the title.
Here is the code I added directly in the pages HTML:
<script type="text/javascript">
jQuery(function($) {
$("#map area").slimbox({/* Put custom options here */}, function(el) {
return [el.href, el.title + '<br /> Download this image in Hi-Res'];
});
});
</script>
Again this means you don't have to place a different image link in every single image Title, it will automatically look for the image that has the same name as your slimbox image but with the
_lg.jpg" added instead. Saves a lot of time and hope this helps someone!
Related
I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.
I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)
The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});
to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom
here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)
Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle
I have an image that is changed when I click on several links. The following javascript code works well :
<img src="myImage.png" id="mainImg" />
Report1
Report2
But I'm trying to change the code to use Jquery code instead. It calls the same server code as the javascript example. No errors are generated & a png is streamed back. But the image is not updated on the html page. To make things worst, the html moves to the top of the page. In the working javascript code, the image would fresh with a nice ajaxy feel where only the image would change & the rest of the page would not move. My Jquery code is below :
<img src="myImage.png" id="mainImg" />
Report1
Report2
<script type="text/javascript">
$(document).ready(function(e) {
$("#report1_id").click(function(e) {
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
$("#report2_id").click(function(e) {
alert("This Is Report2");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport2.do?"+d.getTime());
});
});
</script>
Can anyone see what I'm doing wrong? Any help would be appreciated.
From your code, the image src should change, but maybe it doesn't change to what you'd like. Make sure that http://localhost/convertToReport1.do returns exactly what you need (ideally, you can specify that in the question itself).
The page jump happens because of the anchors href attribute. Either remove it, or prevent the default anchor behaviour in your click handler function, like this:
$("#report1_id").click(function(e) {
e.preventDefault(); // <--- this is the key, return false would also work at the end
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
See it in action here: http://jsfiddle.net/egvac61c/
I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. slightly above the main big image to the right an option can be found to choose between images / information. I use Jquery to show and hide the information or the images, however i don't feel this is such a great way to do so. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/
Here is the relevant Javascript:
$(".selector a").click(function(){
if ($(this).attr("data-show") == "images") {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
} else if ($(this).attr("data-show") == "info") {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
}
})
Relevant HTML:
<p class="selector">images | information</p>
My problem is that the url does not change to reflect the content, but I do not want to make a separate page. I could imagine i would need to make use of link anchor's but am not to sure how to do so.
Thank you in advance
You can change the hash of an url by using:
window.location.hash = 'images';
EDIT:
Firstly, in this context you don't need to include the hash symbol!
Secondly, I missed the obvious, you only need to change the HTML to this to update the URL correctly:
<p class="selector">
images
information
</p>
Then you can use the following in your jQuery, note I've included the attribute check inside the selector itself:
$(".selector a[href=#images]").click(function() {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
});
$(".selector a[href=#info]").click(function() {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
});
If you want to refresh the page and get the same content, you can check the hash tag by doing the following (you may need to edit this depending what elements are showing initially):
$(document).ready(function() {
if (window.location.hash == '#images') {
$("#info").hide();
$("#displayImg").show()
$("#imageFlow").show();
}
else if (window.location.hash == '#info') {
$("#displayImg").hide();
$("#imageFlow").hide();
$("#info").show();
}
});
If all you're doing is setting text in the URL, you can do this easily by setting location.hash
location.hash="#SomeTextHereThatMayOrMayNotNecessarilyBeAnAnchor"
^ Note that "#" is important
I'm currently working on an userscript for a forum, however, it doesn't seem to work.
The forum has two themes, I want to replace the userbars (located in /groupimages/) from the new theme with the ones from the old theme.
I'm currently trying this:
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
/modern_pl/ is the directory of the new theme, /blackreign/ of the old one.
An example URL of an image is /images/modern_pl/groupimages/english/strange.gif
It does select some pictures, but not all. It looks like it suddenly stops, without giving out any error message in Chromes JS-Console.
Lets say the strange.gif is there 3 times on the page, it only replaces it once. Some other pictures (that should be selected because the source contains /groupimages/) are completely ignored, so I doubt that this is happening because one picture is there more than once.
Any ideas?
To me the snippet looks good.
Did you place it inside a Document ready function? If not, the problem could be that the pictures just aren't yet loaded when the script runs.
Try this:
$(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
});
UPDATE
Its hard to help when the code you present works.. but lets assume there is content loaded by ajax after the page loaded completely.
You could do this.. which is not nice at all.. but assuming you don't have further access to the code on the website, try this:
setTimeout(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
},1000);
This waits a second for other scripts to be loaded before running your code.
Something like that ?
var img = $( 'img' );
img.attr( 'src', img.attr( 'src' ).replace( "\/groupimages\/", "\/modern_pl\/") );