How do I make my highslide gallery take only specific images (e.g., contained in a specific div)?
I've got a gallery here: http://civicsector.org.ua/agitation/247-kampanya-chesn-vibori.html, but the problem is that the CMS I'm using outputs the content twice: once for a desktop screen, and once for a mobile screen.
While highslide is loading images from both divs (for desktop and for mobile), the images in the thumbstrip get duplicated.
How do I fix this?
Thanks.
Place your images into a slideShowGroup, per the Highslide JS API:
http://highslide.com/ref/hs.slideshowGroup
Then, the script will load only the images that are tagged as belonging to that group. The references to the images that your CMS creates won't be tagged as belonging to the group, so they won't get loaded into the slideshow twice.
MisterNeutron's answer was perfect for the common usage of highslide. However, in case anyone would use unobtrusive highslide (like myself), you just have to add a check in the hs.onSetClickEventHandler:
hs.onSetClickEvent = function ( sender, e ) {
if ($(e.element).closest('.hidden-desktop').length>0) {
return false;
}
// set the onclick for the element
e.element.onclick = function () {
return hs.expand(this, inPageOptions);
}
// return false to prevent the onclick being set once again
return false;
}
Related
I am getting a problem to reflect the value in the view, I don't want to load the complete page because its very costly to load the page,
I have two controllers(controller1 and controller2), one service(service1) and two views(modalwindow.html and product.html).
The scenario is:
1.User is on product.html(contains multiple accordions) and user explicitly close all the accordions.
2.User clicked on icon which opened modal window, since it's opened the modal window it's not going to change the URL on the address bar.
3.Modal window(Modalwindow.html ) has the link of show product, since the product page is the active page(show product is the accordion which closed by user explicitly) on the browser.
on the click of link, appropriate accordion should be open on the product.html
I am communicating between modal window controller (controller2.js) and product page(controller1.js) through service (service.js), I am calling controller2
how to fix this issue without loading a complete page
Assuming the modal closes when a product is selected, it can return the value to the calling controller. Then it opens the specified accordion.
I fiddled around in your fiddle. You are mixing two ways of showing your categories in the fiddle: an accordion value, and two boolean values (categoryAccordion, productAccordion). I moved to using one way and it seems to work with the eventCallback. Also, you checked wrongly for your 'args' in the eventCallback. You're passing it back as an array, so get the value out of the array first.
Also, you checked wrongly for your 'args' in the eventCallback.`
if (args[0] == 'Product') {
$scope.productAccordion = true;
$scope.categoryAccordion = false;
} else {
$scope.productAccordion = false;
$scope.categoryAccordion = true;
}
See fiddle.
Should it not be working in your real code, it might have something to do with the following SO question.
I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}
I'm trying to create a fairly straightforward interface with Raphael, whereby if you click on a given path you'll get a corresponding div to appear. Since I'm likely going to be using irregular shapes I'll be creating the shapes in Illustrator and then converting to paths using readysetraphael.com, but if there's a better way to do it I'm open to that too.
I'm basically looking to capture the functionality you see here, but with raphael objects as the buttons.
http://jsfiddle.net/4xV7b/
Here's my current fiddle -- what I don't understand is what needs to happen during the mouseclick event to show/hide the corresponding divs.
el.click(function() {
//mysterious voodoo magic goes here
});
If you were using Raphael 2, you could use the data method to store arbitrary information with your elements -- as in this example.
Essentially, when you're creating each path, you simply call
el.data( 'div_id', 'greenthing' );
Then, when that element is clicked, you can retrieve the indicated div from the element using
el.click( function()
{
var div_id = this.data( 'div_id' );
// Display the div here. Josemando's approach is perfectly cool and will work universally.
} );
If you wanted to make sure that only one div at a time is displayed, you could do this (primitive but effective):
el.click( function()
{
rsr.forEach( function( subEl )
{
var divId = subEl.data('div_id' );
if ( divId && document.getElementById( divId ) )
document.getElementById( divId ).style.display = 'none';
} );
} );
There are, of course, other ways to skin that cat.
You may also find that your path construction code would be more manageable if you put all of the shape-specific data into a structured object and then render each path in a loop. The fiddle I've provided above demonstrates such a technique, which will pay off quickly once you have more than a handful of shapes.
You can use pure javascript to show a div:
document.getElementById("redthing").style.display = "block";
If you want animations, you can try using jQuery, or even manually creating them with css
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'));
});
});
How to resize an external site to fit into an iframe in my website?
Please any one help me?
)
You cant interact with an external iframe if it is in a different domain. If it is in the same domain, you can resize its contents as follows:
/**
* this function allows you to retrieve the window object of an iframe given by its ID
*
* #param {string} id - iframe id
*/
var getIframe = function (id) {
if ($.browser.mozilla) return document.getElementById(id).contentWindow;
return window.frames[id];
};
then, from the external file (the one which contains the iframe), you can call something like this when the iframe is loaded:
var resizeIframeContent = function(iframeID, sizeX, sizeY){
var iframe = getIframe(iframeID);
iframe.updateSize(sizeX, sizeY);
}
With this code, you are calling the function updateSize in the inner document of the iframe, so you should add this function in the nested document attached to the window object (global namespace). Something like this:
var updateSize= function(sizeX, sizeY){
//do you resizing stuff here, which depends on your html structure, it could be something like this:
$("#content").width(sizeX).height(sizeY);
}
However, I think that you question is wrong, and you are actually trying to ask how can you modify the size of your iframe (not the iframe content) to fit its inner content. If so, you cant do it in a crossdomain situation, but if both pages are in teh same domain you can do it in a similar way, something like this:
On your inner document, when the document is ready, send its size to the parent container:
$(function(){
var content = $("#content"); //change this to point your container, or obtain the document height or anything else
parent.onIframeDimensionsRetrieved( content.width(), content.width() );
});
and in your outter document (the one with the iframe) retrieve the new size and update the iframe dimensions:
var onIframeDimensionsRetrieved = function(width ,height){
$("#youriframe").width(width).height(height);
}
That is all :-) All my sample code was using jQuery to make it readable, you can do it with pure JS too if you want to.
Good luck! i hope it helps :-)