I looking to hack something like this:
An example >> Just click on "Start PicLens Lite Slideshow PicLens".
Did you see how the swf/flash loads on top of the normal page?
Im looking to do that :-D
If there is some code out there the better otherwise any tips or hits are welcome.
Thanks lots.
You can look at javascript tools like Shadowbox that can load any types of elements into a box above the site.
You are looking for the lightbox effect. Just set your content to your flash object and use a lightbox sans borders.
If you are using a framework such as Mootools or jQuery I'd suggest a lightbox clone that uses them (e.g. Milkbox or MediaBox Advanced for for Mootools).
Related
I have been working with html and css for about 6 months, and a very very little javascript.
I recently saw this site here: http://daegonner.com and i noticed if you click "vote" it opens up this window box, but on the same website.
How is this made?
There are some thing you need to do to have that look.
Firstly you need to create that small windows using css and html, by the way it's called modal (like this one http://getbootstrap.com/javascript/#modals)
Secondly, you need to study javascript onclick events (you can refer here http://www.w3schools.com/jsref/dom_obj_event.asp), which help the small window display when you click to vote link.
Finally, the content inside that box is up to you. The page which you gave embed the content from another page through .
Look for CSS Popup or Lightbox on Google, you will finde something helpfull
You will have to include the jQuery library within the <head> tag:
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
And then download, include and use some of these plugins or whatever else you find.
http://dimsemenov.com/plugins/magnific-popup/ (recommend - very good and easy to use)
http://www.jacklmoore.com/colorbox/
So I am trying to find out a way to view images without hiding the rest when clicked on
for instance
<img src="someimage.jpg"/>
<img src="someimage2.jpg"/>
<img src="someimage3.jpg"/>
<img src="someimage4.jpg"/>
for instance when i click on the first image it opens up in a new window and thats it
i´d like to be able to scroll through these images. i´d like to be able to go to the next image by clicking "next" for instance or something like that!
Calling an image in the browser directly will return that file, not an html page with the file embedded. In your case you will have to write a page that handles this functionality for you.
You don't mention whether or not javascript / jquery is an option for you, but it would definitely be the easiest solution in my opinion.
Look into something like a jquery carousel to handle a basic slideshow.
And if this is not the answer you were looking for, then I'm afraid the solution for you - fitting your limits of html, css and image - is to make individual html pages for each image and hard code the next and previous links... each and every one... the good ol fashioned way.
... headers
<body>
<img src="someimage.jpg" alt=""><br>
Previous | Next
</body>
http://fancybox.net/ Has a great javascript type plugin for having the image show up in a type of lightbox. Otherwise seach for "jquery image zoom plugin". That should give you some good plugins if javascript will work for you.
I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?
You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.
If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.
also if you are using cms. you should be turn off bbcode image, and embed html
I need to create tabs on the webpage using html, and on click of each tab, need to load different content on the same page. Do let me know how to go about this, or any useful links that might help me.
Thanks,
Geetha
This can be done with jQuery and jQuery UI.
Here you can find some information about it. http://www.stilbuero.de/jquery/tabs_3/
Dojo (javascript framework) has a TabContainer. It's easy to implement, but depends on the content and how do you want to present it to the user.
You can start by looking here: Dojo TabContainer info
There's an example on that site which lets you see the html and javascript required to build a tabbed container.
I want to achieve a blur-page effect as an action from a pop up dialog box. How can I do this in HTML and CSS?
Thickbox
http://jquery.com/demo/thickbox/
Fontbox
http://www.mehdiplugins.com/misc/frontbox.htm
FancyBox
http://fancybox.net/
FancyZoom
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
SlimBox
http://www.digitalia.be/software/slimbox
Shadowbox
http://www.shadowbox-js.com/
I'm not sure about blurring, but Lightbox might do the trick for you.
Lightbox, or the more technical term a "Modal Popup"
if you're using ASP.NET you can use the ModalPopupExtender withinthe AjaxToolKit
There's also BlockUI plugin for the jQuery framework.
Check out the demos on the following site:
http://malsup.com/jquery/block/#demos
To use the plugin, you'll need to include the jQuery framework code. This is dead simple. You can download the jQuery code for free, and include it on your site from
http://www.jquery.com
With this and a lot of solutions given, you may need a that is hidden initally. The div becomes the content of the popup.